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 can the top DIV from two stacking DIVs affect the other's height

    Vaadin - How to customize MenuBar to look like links

    how to interactively toggle CSS sheets(s) on a webpage for testing/learning purposes?

    How to draw with CSS canvas a slideshow frame?

    CSS how to change color of a specific primary-panel in a if-block

    CSS: How to create a
  • with 100% width
  • How to conditionally render CSS and JavaScript inside head element of an HTML

    How do I properly inspect jquery and javascript using web developer tools?

    How to make the whole div clickable

    How to add an unknown amount of dots to a line depending on length of word?

    How can I put styleName (css) on ui.xml to HTML5 input element (range)

    How to provide CSS properties for Different browsers like Mozilla and Chrome

    How to show borders of th elements with gradient fills in IE9?

    How to show indicator of loading?

    Bootstrap “jumbotron-narrow” example. how does the style change?

    How to overlay an image inside an image with HTML, CSS

    custom radio button show value inside

    How do I change this flipping card to rotate itself onclick?

    How to rotate element to left and right based on mouse movement using jQuery & CSS

    How to hide Fileupload with simple span by using css

    how can I hide an element inside iFrame using Jquery or CSS

    How to Display a div on mouse-over using jquery ?

    How to only make the opacity lower for the background and not the text in it?

    How To Adjust CSS List On Hover Image

    How to design the vertical scroll bar or customize the vertical scroll bar design?

    How to stop CSS selector from selecting all child elements

    How do you hide an HTML element based on a series of parent elements

    How to have a DIV appear after you hover over an image/link/another div?

    How to expand a div to its content width WHEN it is larger than its parent?

    How do I put several elements on the second row in a div