Geek Answers Handbook

Highlight active form using 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 does not work, so I ask a question. How can I get the form in which it is, if it is entered as the focus for selection? That is, I want to be able to apply styles to the active FORM, and not to the active INPUT - is this something that can be done without JS or something like that?

+4
source share
6 answers

This code works like an exercise. but probably not the solution you should use . The legend -based version actually seems acceptable.

There is no form:focus selector, so I thought an individual input:focus could create the desired effect using pseudo elements. However, pseudo-elements can only be used for elements with content , for example, if I replaced 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; }

Twisted , but it instantly looked pretty crazy, so I reorganized the decision to rely on the legend element . Enjoy :)

+2
source

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

+3
source

This is an older question, but at the moment some of the most popular browsers support a css pseudo-selector called :focus-within , which can create a form (without javascript) that has focused input.

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

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

+3
source

I was looking for the same style technique. From the point of view of UI / UX, simplifying search forms to one element makes a lot of sense in certain situations.

Consider the example below:

Search Form Example

When you approach it in terms of development, the knee-jerk should decide on the style of the form itself, and not on the input elements. The transparent input [type = text] to the left and the transparent PNG send button to the right, and you have a sharp search field.

As you already found out, you are abandoning the CSS style features associated with: focus, because the input field is not the one that controls the background / color, etc. Instead, a form element is used.

Shape: A focus selector would be the perfect way to handle this. Unfortunately, we need to wait for CSS4 for this (thanks matt3141 for tid-bit).

In the meantime, you have several options available.

Option 1 - Disable the click to submit button

I usually try to avoid this, if possible, but you have the option to opt out of the submit button altogether. Create a text box of your choice and use a background image with a position bounded by a left or right margin. When a user types in his query and presses the enter key, you can still activate the GET action. The above example uses this technique.

Example: http://designdisease.com/

Pros: The easiest way to configure.

Disadvantages: users who still click the search buttons may be confused.

Option 2 - Use an alternative element to style the background

Your next option is to use a selector selector and content tags like ov so generously explained in his previous answer. This in effects adds a new element and stylizes it as a new background for the specified area when the focus effect is applied to the input field.

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

Pros: A simpler extension for larger forms with multiple fields.

Disadvantages: intensive selectors cannot degrade as gracefully as we would like.

Option 3 - Using absolute positioning for a stack of elements

In situations where the text field will cover the entire width of the form, you can use the position: absolute; attribute to simply load the submit button on top of the input element, and then several css buttons on the button to remove the background / border - giving the same effect as our example shown above, but with the added benefit of making it interactive.

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

Step Two: Enter a text box 100% wide.

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

I updated ov to include a new technique:

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

Pro's: It degrades gracefully, gives us what we want in most cases with one input field.

Disadvantages: it is not so easy to expand to large forms, for example, ov fix is.

-

As you can see, each option has its drawbacks, but if you know about them before, you can reduce their impact. Hope this helps!

+2
source

If there are several forms on the page, without JS, the visualizer will not be able to link the stylesheet and the form. The best way to do this is to have the form name / id and JavaScript to apply the stylesheet when the form gets focus.

0
source

You cannot "focus" on the form. You can only "focus" on form elements within the form (which you can edit and enable) using CSS. Hope this helps.

0
source

More articles:


All Articles