How to style a form element when an input is focused?


Tags: html,css

Problem :

I have a form that is structured similarly to the one below. How do I use CSS to style the input[type=submit] element when the input[type=text] is focused?

For example:

<form id="example">
    <input type="text" name="search">
    <input type="submit" value="Search">
</form>

<style>
    #example > input[type="text"]:focus {
        // please style input[type="submit"]
    }
</style>

I'm trying to accomplish this because a wordpress theme has a search form with the search input and submit button inline. When a user focuses on the input, I want the input field and submit button to have the same border color change.

Alternatively, I could style the entire div around the input and submit button, but then we come back to the problem of styling another element when one element is focused.

Is this even possible with CSS3 or would I have to resort to a javascript function? (Last resort.)



Solution :

If the structure in your actual code is the same as what you've posted in question, you can use + (adjacent) selector to select the submit button when there's focus on text input.

This is the selector you're looking for: #example > input[type="text"]:focus + input[type="submit"]

To read more about + selector, this answer to "What does the “+” (plus sign) CSS selector mean?" explains it in a short manner and even covers browser support.


Here is a snippet to show it in action. Doesn't look too pretty, but does the job :)

#example > input[type="text"]:focus + input[type="submit"] {
  background: gray;
}
<form id="example">
    <input type="text" name="search">
    <input type="submit" value="Search">
</form>


    CSS Howto..

    Rails - how to build a grid-like list of product page

    How to make the CSS “~” selector work in GWT Css Resource

    How to make div fill the rest of viewport with keeping of aspect ratio (CSS or jQuery)?

    How do I make a div take the remaining height of a parent?

    JS+CSS How to display images from an array from top right to bottom left

    How to display text over an image css [duplicate]

    How to scale html font size in Bootstrap 4 without breaking responsive navbar

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

    how to make dynamically loaded image with different width and height responsive in css

    How to maintain the background image until end of the page

    How to use calc in CSS for mozilla firefox without position absolute

    how to prevent child element from widening parent element's width in css

    How bad is to store all background images in CSS?

    HTML layout with vertical divider and menu between sections - how?

    How to display two images on the same line (CSS)

    How to filter HTML elements based on their css attribute values ? [closed]

    How to Add Another Instance of Date picker in given Code

    CSS: How to change class style if another style is hover

    How to arrange div as a dock panel?

    How To Turn JS Objects To HTML And Style With CSS

    Greasemonkey how to apply a CSS rule only for @media print?

    How To Create SubMenu in Drop Down (HTML/CSS)

    How to add materialize css to an angularjs project?

    How to position iframe (calendar) inside php echo statement?

    How to increase Page Width with the Help of CSS?

    How do I simulate a hover with a touch in touch enabled browsers?

    What is the purpose of this csslint error and how can I get rid of it?

    How to stop an image shrinking on responsive site whilst also keeping it centred

    How can I adjust this carousel to only pause when user mouses over one of the boxes?

    How do i resize an image based on its div width? [duplicate]