CODEWITHSUNDEEP
htmlcssformsfocus
Bilal Akil
Bilal Akil

Reputation: 4755

Highlight active form with CSS?

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <style>
            form:focus{
                background:red;
            }
        </style>
        <title>Home, sweet home</title>
    </head>
    <body>
        <form>
            <input type="text"/>
            <input type="submit"/>
        </form>
        <form>
            <input type="text"/>
            <input type="submit"/>
        </form>
        <form>
            <input type="text"/>
            <input type="submit"/>
        </form>
    </body>
</html>

This obviously doesn't work, as is why I'm asking the question. How can I get the form which has one if it's inputs as the focus to highlight? That is, I want to be able to apply styles to the active FORM, not the active INPUT - is that doable without JS or something?

Upvotes: 5

Views: 10593

Answers (6)

Joe Allen
Joe Allen

Reputation: 123

This is an older question, but as of now, some of the more popular browsers are supporting a css pseudo selector called :focus-within, which can style a form (without javascript) that has a focused input.

Here is the current support for the selector: http://caniuse.com/#search=focus-within

If you're using a supported browser, here is an example: https://codepen.io/jumprope-design/pen/LjxORX

Upvotes: 10

Will D. White
Will D. White

Reputation: 1074

I've been looking for the same styling technique for a while. From a UI/UX standpoint - simplifying search forms to a single element makes a lot of sense in certain situations.

Consider the example below:

Search Form Example

When you approach it from a development standpoint the knee-jerk is to decide to style the form itself instead of the input elements. A transparent input[type=text] to the left, and a transparent .PNG submit button to the right and you've got a sharp looking search field.

As you've discovered though, you give up the CSS style capabilities associated with :focus because the input field isn't the one controlling the background / color etc - the form element is instead.

The form:focus selector would be a perfect way to handle that. Unfortunately, we've got to wait to CSS4 for that (thanks to matt3141 for the tid-bit).

In the meantime, you have a few options available

Option 1 - Forgo the Clickable Submit Button

I usually try and avoid this if possible, but you have the option to forgo the submit button altogether. Style the text field as you intended, and use a background image with the position limited to the left or of the field right. When the user types in their query, and presses enter, you can still fire a GET action. The example image above uses this technique.

Example: http://designdisease.com/

Pros: Easiest to set up.

Drawbacks: Users who still click search buttons might be confused.

Option 2 - Use an Alternate Element to Style the Background

Your next option is to take advantage of the sibling selector and content tags as o.v. has so generously explained in his/her previous answer. This in effects adds a new element and styles it to act as a new background for a specified area when the :focus effect is applied to an input field.

Example: http://jsfiddle.net/ovfiddle/PEK7h/2/

Pros: Extendable to larger forms with multiple fields more easily.

Drawbacks: The intensive selectors may not degrade as gracefully as we'd like.

Option 3 - Use Absolute Positioning to Stack the Elements

In situations where the text field will encompass the full width of the form, you can use a the position:absolute; attribute to simply load the submit button over top of the input element, and then a few css tweaks on the button to remove the background / border - giving the same effect as our example image above, but with added benefit of making it clickable.

Step One: Give the form a position - relative/absolute/fixed.

Step Two: Give the text field a width of 100%.

Step Three: Give the button an absolute position, and right position of 0.

I've updated o.v.'s fiddle to incorporate the new technique:

Example: http://jsfiddle.net/PEK7h/17/

Pro's: Degrades gracefully, gives us what we want in most single input field cases.

Drawbacks: Not as easily extendable to large forms like o.v.'s fix is.

--

As you can see, each option has its own drawbacks - but if you know about them ahead of you can usually lessen their impact. Hope this helps!

Upvotes: 2

Oleg
Oleg

Reputation: 25018

This code works as an exercise but probably not a solution you should use. The version relying on legend actually seems acceptable.

There is no form:focus selector so I thought instead the individual input:focus could create the desired effect using pseudo-elements. However, pseudo-elements can only be used on elements with content, like if I were to replace input[type=submit] with button

form {
    position:relative;
}
/*style the pseudo-element before a button that is a general sibling
  of any element that currently has focus within a form*/
form *:focus~button:before{
    content:"";display:block;background:red;
    /*take up the entire space of the form*/
    position:absolute;top:0;right:0;bottom:0;left:0;
    /*but render behind its children*/
    z-index:-1;
}

Fiddled, but it instantly looked pretty crazy, so I've refactored the solution to rely onto a legend element. Enjoy :)

Upvotes: 3

Geocrafter
Geocrafter

Reputation: 145

You cannot "focus" on a form. You can only "focus" on the form elements inside the form (that are editable and enabled) using CSS. Hope this helps.

Upvotes: 0

AvkashChauhan
AvkashChauhan

Reputation: 20576

If you have multiple forms in the page, without JS, the renderer will not be able to link the stylesheet and the form. The best way to do it is to have the form name/ID and have JavaScript to apply the stylesheet when form get focus.

Upvotes: 0

matt3141
matt3141

Reputation: 4443

There is no parent selector in CSS so javascript is required. CSS 4 is planned to get this feature, however.

Upvotes: 3

Related Questions