html - Custom button next to input not changing border color correctly with BS3 -


i have custom button next input not acting intended. creating overlapping border darker hint when use rgba. shadow adds seems occur in latest version of bs , not 3.0.0.

html

<div class="row">     <div class="col-lg-12 newsletter">         <form method="post" action='/' class="form" id="newsletter-form">             <div class="form-group" id="newsletter-form-group">                 <div class="controls">                     <div class="input-group">                         <input type="text" class="form-control newsletter-input" name="testinput" placeholder="your email address here.." />                             <span class="input-group-btn">                             <button class="btn btn-default newsletter-btn" type="submit">sign up</button>                         </span>                     </div>                 </div>                 <label class="control-label newsletter-status" for="testinput"></label>             </div>         </form>     </div> </div>

css

/* latest compiled , minified css included external resource*/

 body {     margin: 10px;     background-color:#404040; } .btn:focus, .btn:active, .btn.active {     outline: 0!important; } .newsletter-btn, .newsletter-btn:focus, .newsletter-btn:active, .newsletter-btn.active {     color:#fff;     background-color: rgba(52, 152, 219, 1.0) !important;     border: 1px solid rgba(52, 152, 219, 1.0) !important;     font-weight:500;     border-radius:0!important;     -webkit-transition: .3s;     -moz-transition: .3s;     transition: .3s; } .newsletter-btn:hover {     background-color: rgba(52, 152, 219, 0.5) !important;     border: 1px solid rgba(52, 152, 219, 0.5) !important;     color:#fff!important;     box-shadow: none!important;     -webkit-box-shadow: none!important;     -moz-box-shadow: none!important; } .newsletter input {     box-shadow:none!important;     border-color:#fff!important;     background-color: #fff;     color:#fff;     border-radius:0!important; }

demo: https://jsfiddle.net/dtchh/7138/

hovernormal

to fix different border color, set border color transparent on hover--you overlapping 2 elements 0.5 opacity, give of lighter border.

.newsletter-btn:hover {     background-color: rgba(52, 152, 219, 0.5) !important;     border: 1px solid transparent !important;     color:#fff!important;     box-shadow: none!important;     -webkit-box-shadow: none!important;     -moz-box-shadow: none!important; }

to fix funny growing thing, set z-index of button:

.newsletter-btn{     z-index:999; }

see this functioning fiddle


Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more