The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example:
textarea:focus {
background: pink;
}Any element (most commonly <input>s and <textarea>s) are in “focus” when they are selected and ready to enter text (like when a cursor is blinking). Mouse users can click them (or their related label) to focus, and keyboard users can TAB into them.
“Tabbing”
nother use of the :focus pseudo class is “tabbing” through elements. Many browsers have a default focus state for tab selection, which is a dotted outline. It is quite easy to remove, but make sure to replace it with a suitable alternative if you do.
<a>s, <button>s, <input>s, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML. Both the contenteditable and tabindex attributes work for this, as in this example:
Other Resources
- CSS2 Spec
- Selectors level 3
- Selectors level 4
- MDN
- Removing the Dotted Outline on CSS-Tricks
- More about
contenteditable - More about
tabindex
Related
The `:focus-within` Pseudo Class
:focus-within
form:focus-within { background: lightyellow; }
`:focus-visible` and backwards compatibility
Browser Support
All browsers support basic usage of :focus.
test
I want to use focus event using inline css in input tag
what is use of :focus
The :focus selector is used to select the element that has focus.
The :focus selector is allowed on elements that accept keyboard events or other user inputs.
Here’s a example.
focus is used for change the background color (ex for input field focus).
yes
Hi Kedar,
:focus will execute the css we have written for the particular element type and thereby we can write the css codings inside. so that, we no need to write the css property again and again every where.
for example,
input[type=text]:focus{
background-color:#ff0000;
}
if you write this css in your page then input tag with type text’s background color will be red whenever we focus it. this :focus automatically binds the onfocus event internally…
Thanks for that dude! Worked fine for me :)
is it possible to :focus on two elements?
Is it possible for your cursor to be in two places at the same time? :focus is meant to give your user feedback as to where things will happen on-screen when they type or use selection keys, etc. The only way to get the focus state is to move the cursor to the element. But even if you could set the same visual state on two or more elements when one of them gets focus, why on earth would you? If two elements are lit up (or outlined) in the same way, where will the action occur? Remember that only text (and similar) inputs and textareas have a secondary indication, and it isn’t always easy to see the blinking cursor on the page. Use :focus to tell the user clearly what has focus, not as a page state gimmick.
Yes
I actually have a use case where this is needed. We have an application where a user is looking at an image of handwritten text on the left side of the screen, drawing a box, and typing what it says in the box (like a person’s name); and then that name appears in a person name field in the “structured data” view on the right. As they type on the left, it updates on the right. That works fine. We wish that it would look like a text edit field that has “focus” on both fields at once, so that the user could look either place and feel like it’s ok to edit there. Both would stay in sync. It’s just a convenience to the user to edit where they’re looking/thinking about it.
Very good info bro!
:focus when we use this property then on focus that means on click the particular button or a tag pick the particular css which we write for on focus event like below mention example.
:focus {
background: #ddd;
border: 1px solid #000;
}
Am asking what about focus out. is to possible to target focusOut
using css. I might use it in bootstrap is i get help from you guys
Am asking what about focus out. is to possible to target focusOut
using css. I might use it in bootstrap is i get help from you guys
.input:focus { background: pink; color:#000;}
how to remove the background colour whem iam focussing
button:focusdoesn’t appear to work in Firefox or Safari in Mac OSX, nor in Safari iOS. That’s enough users to make that one effectively unusable.I have used
:focusas a technique for drop-down menus:HTML:
CSS:
The
tabindexattribute enables focus, and theoutlineproperty removes the visual indicator.Supposed to work from IE8 up.
I want to make a particular area text area focus true when i will click on another button. (cursor should blink in text are when i click on particular button)
Autofocus works good but only once when page refreshes. I want to focus( cursor blink in text area) on every click on particular button.
If it’s really a button, no, it can’t be done without JavaScript.
If you create a
labelfor thetextarea, then that’s exactly what it’s supposed to do. Thelabeland thetextareadon’t have to be next to each other as long as you give thetextareaanidattribute, and use theforattribute in the `label.Using CSS, you can make the
labellook any way you want, including the appearance of a button.I couldnt understand mark. Can you please explain using one example? If i you are saying that javascript is needed for button then please write that java script. As well as explain how to make it possible using label. Please give suitable example for each.
The
labelis supposed to act like a button for this purpose. You can use it as follows:Alternatively, instead of (or as well as) the label above, you could add the following:
Do I get extra credit for this?
Thanx mark bro
Do you have solution for same problem using angularjs? It will be best option for me.
Is it possible to use input along with focus and not selector?
I want to apply the focus selector to all the input elements but one.
Can we use something like:
input:focus(:not(.phone)){
}
I think Abhishek asked this above but I didn’t see an answer. If I focus on something and then go backwards, how does one “reset” so that it doesn’t remain focused?
In iOS Safari I can’t get two divs to focus one after another. The first element stays focused on clicking the second one. Is there a workaround for this?
hi
actually if we take login and signup buttons side by side and if we click on login button , the signup button background color should be disappeared and in the same way if we click on login button, signup button background color should be diasppeared /// send the code this as soonas possible
Hi, am looking a way where the button background color can remain same even i click somewhere else on screen.
I am setting some color to button using button:active and just goes away when i click somewhere else on screen. I have couple of buttons where i need to set this property, is this doable using CSS.
Thanks,
V
https://stackoverflow.com/questions/46643441/how-do-i-change-a-menu-image-opacity-when-a-menu-item-is-active
the above link is a question i asked today on stackoverflow. the solution given has issues. can you check my comments below it for help please.
how to add focus to <img tag inside an <a href tag?
input:focus{
outline-color: rgb(0,114,198,0.7) !important;
outline-width: 0.1px !important;
-moz-outline-color: rgb(0,114,198,0.7) !important;
-moz-outline-width:0.1px !important;}
is not working on Mozilla firefox. What to do?