With the following HTML:
<input type="text">
And the CSS:
input[type="text"] {outline: none; border: thin solid red}
input[type="text"]:active {border: thin solid yellow}
I hoped that the text field would have a yellow border when it is active (when the user is typing). However, the new style only applies when you are clicking on the element. How can I reach the effect I want?
You should use :focus:
input[type="text"]:focus {border: thin solid yellow}
JSFiddle Demo.
From W3C:
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
Related
In Chrome/Firefox (haven't looked in other browsers), my mouse clicks are showing the properties attached to the :focus selector. See http://jsfiddle.net/qtLoLf6p/1/
a:focus {
color: black;
text-decoration: none;
}
I'd like it to work just like the default blue outline works on anchor (a) tags, just on tab focus and not on click focus.
Note in my fiddle that i've just added the JS so the page doesn't change.
I'm alittle unclear on what you're trying achieve with the overall appearance however I would recommend looking to the :active selector.
When tabbing onto a link, the :focus selector is fulfilled, however when clicking on a link the :active selector is also fulfilled, this means you can set your styling for tabbing in :focus, and then override these styles with the mouse only properties in :active
The below example will give both the mouse click and the tab event different styling
a:focus {
color: #000;
text-decoration: none;
}
a:active {
color: #F00;
text-decoration: underline;
}
JSFiddle example here
Edit: An extract from CSS-Tricks explaining the purpose of :focus
The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse
:focus selector explanation article
I have a question on accessibility on a postchat survey window which I've worked on.There's a close button on the top right(as an image of X) where I've included visual focus by putting focus pseudo class, now the problem i'm facing is that the close button has white border around it when it is focused and this is happening as expected in chrome, Mozilla but in IE a blue border is coming. Can someone help me how to remove this blue border and bring white in its place?
I'm sharing the code snippet where I've used focus
a.close-link:focus {
outline: 1px dotted white;
}
Though active and focus are to different states but you can try both at same time for your purpose i think
:active Adds a style to an element that is activated
:focus Adds a style to an element that has keyboard input focus
:hover Adds a style to an element when you mouse over it
:lang Adds a style to an element with a specific lang attribute
:link Adds a style to an unvisited link
:visited Adds a style to a visited link
following source http://www.w3schools.com/CSS/css_pseudo_classes.asp
a.close-link:focus, a.close-link:active {
outline: 1px dotted white;
}
:FOCUS pseudo-class does work in IE, Instead, I believe your problem is with outline property.
Try this:
IE 9
George Langley wrote in to say that IE 9 apparently doesn't allow you
to remove the dotted outline around links unless you include this meta
tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
((source))
Well i've found out a workaround. For IE9 border comes by default so I've removed border now and the blue outline is no more there!
a.close-link:focus {
outline: 1px dotted white;
}
a.close-link img {
border: none;
}
I am trying to style a search input box, such that, when the user, click into the box, it changes to a different color, and to get rid of the blue outline that indicates that the user has selected the text box.
Any suggestions or ideas? Thanks.
jsFiddle: http://jsfiddle.net/7t5AY/
HTML:
<input type="text" id="text-search" placeholder="Search" >
You can use the :focus selector, e.g:
Demo Fiddle
input[type=text]:focus{
outline:none; /* removes the blue outline on focus */
background:lightgrey; /* however you wish to style */
border:1px solid black; /* however you wish to style */
}
Or more stylishly..
Note that in HTML5, input type="search" is a valid designation
I'm trying to improve accessibility on a WordPress site where 'focus' is missing from the stylesheet.
I understand how to style text links, but I can't seem to apply the same to image links. I'd like to put a dashed line beneath images when in focus.
Here's what I've put - pretty simple:
a img:hover {border-bottom: 3px dashed #000;}
a img:focus {border-bottom: 3px dashed #000;}
It works for hover, but not focus!
Any ideas?
Just move the pseudo-classes to the a element:
a:hover img {border-bottom: 3px dashed #000;}
a:focus img {border-bottom: 3px dashed #000;}
User agents generally do not consider img elements as accepting focus. From the w3 CSS spec:
The :focus pseudo-class applies while an element has the focus
(accepts keyboard events or other forms of text input).
You can enable focus on img elements by adding a tabindex attribute (<img src="foo.png" tabindex="0" alt="photo of foo">) but I wouldn't recommend it unless you have some specific reason for doing so. Unless the element actually accepts keyboard input adding it to the tabbing order adds no benefit for AT users (and indeed, may be confusing).
What is the difference between the :focus and :active pseudo-classes?
:focus and :active are two different states.
:focus represents the state when the element is currently selected to receive input and
:active represents the state when the element is currently being activated by the user.
For example let's say we have a <button>. The <button> will not have any state to begin with. It just exists. If we use Tab to give "focus" to the <button>, it now enters its :focus state. If you then click (or press space), you then make the button enter its (:active) state.
On that note, when you click on an element, you give it focus, which also cultivates the illusion that :focus and :active are the same. They are not the same. When clicked the button is in :focus:active state.
An example:
<style type="text/css">
button { font-weight: normal; color: black; }
button:focus { color: red; }
button:active { font-weight: bold; }
</style>
<button>
When clicked, my text turns red AND bold!<br />
But not when focused only,<br />
where my text just turns red
</button>
edit: jsfiddle
:active Adds a style to an element that is activated
:focus Adds a style to an element that has keyboard input focus
:hover Adds a style to an element when you mouse over it
:lang Adds a style to an element with a specific lang attribute
:link Adds a style to an unvisited link
:visited Adds a style to a visited link
Source: CSS Pseudo-classes
There are four cases.
By default, active and focus are both off.
When you tab to cycle through focusable elements, they will enter :focus (without active).
When you click on a non-focusable element, it enters :active (without focus).
When you click on a focusable element it enters :active:focus (active and focus simultaneously).
Example:
<div>
I cannot be focused.
</div>
<div tabindex="0">
I am focusable.
</div>
div:focus {
background: green;
}
div:active {
color: orange;
}
div:focus:active {
font-weight: bold;
}
When the page loads both are in case 1. When you press tab you will focus the second div and see it exhibit case 2. When you click on the first div you see case 3. When you click the second div, you see case 4.
Whether an element is focusable or not is another question. Most are not by default. But, it's safe to assume <a>, <input>, <textarea> are focusable by default.
:focus is when an element is able to accept input - the cursor in a input box or a link that has been tabbed to.
:active is when an element is being activated by a user - the time between when a user presses a mouse button and then releases it.
Active is when the user activating that point (Like mouse clicking, if we use tab from field-to-field there is no sign from active style. Maybe clicking need more time, just try hold click on that point), focus is happened after the point is activated. Try this :
<style type="text/css">
input { font-weight: normal; color: black; }
input:focus { color: green; outline: 1px solid green; }
input:active { color: red; outline: 1px solid red; }
</style>
<input type="text"/>
<input type="text"/>
Focus can only be given by keyboard input, but an Element can be activated by both, a mouse or a keyboard.
If one would use :focus on a link, the style rule would only apply with pressing a botton on the keyboard.
Using "focus" will give keyboard users the same effect that mouse users get when they hover with a mouse. "Active" is needed to get the same effect in Internet Explorer.
The reality is, these states do not work as they should for all users. Not using all three selectors creates accessibility issues for many keyboard-only users who are physically unable to use a mouse. I invite you to take the #nomouse challenge (nomouse dot org).