how to make the entire form (input and submit button) change border color on focus (bootstrap 3)


Tags: css,forms,input,twitter-bootstrap-3

Problem :

I am using Bootstrap 3 and am trying to make it so that the entire form (input field AND button), change the border color on focus. Meaning, if I click in the input field, the entire border of the button should also change colors, not just the border of the input field. Does that make sense?

Here is the code:

<form class="form-inline" role="form">

<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>

</form>

and the CSS:

.form-control:focus {
    border-color:#1ABC9C;
    box-shadow:none;
}

The problem with that is ...it just changes colors of the input field, not the button, unless someone clicks the button. How do I make it change colors for both at the same time?

Fiddle: http://jsfiddle.net/CbGpP/



Solution :

Use the adjacent sibling selector so your CSS looks like this:

.form-control:focus, .form-control:focus + span .btn{
    border-color:#1ABC9C;
    box-shadow:none;
}

It's supported in all major browsers including IE7+.

Here it is working: http://jsfiddle.net/CbGpP/2/


    CSS Howto..

    How to make css style on Google custom search engine

    how to make 100% buttons with fixed pixel space

    How do I use a pre-defined CSS style for a programmatically drawn TextField?

    How to align element based on the other element that is above

    How to add decoration to link in CSS?

    How to position element between two sections while also being responsive?

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    Rails: How to control CSS, Javascript files

    How to make width of navigation auto, while absolutely positioning its wrapper

    How can I centralize this jquery styling colors into css?

    How to use CSS to modify an icon with the bootstrap collapse

    How to justify 4 divs in one row [duplicate]

    How to Make a Banner Image?

    how to make a space-keeping column use css and table tag

    How to CSS Display:table grow right

    How to create the equivalence of CSS “ease” in jQuery?

    How to trigger a modal view with Highcharts, when zoom is also enabled?

    How do I style forms using CSS

    How to align brand title and links left in Bootstrap navbar?

    CSS: How to blur background image within the div?

    How to apply this sidebar to all pages using CSS?

    How to completely change the css position of an element on the page to appear in another part of the document flow?

    How to create both-sided dotted line around a title? [duplicate]

    How to make a CSS bar go from right to left?

    How to use add/subtract in css propert?

    CSS - How to avoid element content to be displayed on 2 lines

    How to secure css and js files means end user could not download our css and js file?

    How to override default “text” cursor on mousedown, mousemove?

    How can I stretch my navigation and content area height to 100% in CSS?

    Building a DOS-feel script. How to make the command line?