UI element state pseudo class Selector
The common feature of the UI element state pseudo class Selector is that the specified style works only when the element is in a certain state and does not work in the default state.
Selector E:hover, e:active, and E:focus
The E:hover selector is used to specify the style used by the element when the mouse pointer is moved over the element;
The e:active selector is used to specify the style used when the element is activated (the mouse is pressed on the element and not released);
The E:focus selector Specifies the style to use when the element obtains the cursor focus, mainly when the text box control gets the focus and text input.
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title>e:hover, E:active and e:focus</title>
<style type= "Text/css" >
Input[type= "Text"]:hover {background-color:greenyellow;}
Input[type= "Text"]:focus {background-color:skyblue;}
Input[type= "Text"]:active {background-color:yellow;}
</style>
<body>
<form>
<label> Name: </label><input type= "text" name= "name"/><br/>
<label> Address: </label><input type= "text" name= "addr"/>
</form>
</body>
E:enabled and e:disabled Pseudo class selectors
The e:enabled selector is used to specify the style when the element is in the available state;
The e:disabled selector is used to specify the style when an element is in an unavailable state.
When elements in a form are often switched between available and unavailable states, these two selectors are typically used in conjunction with the following example:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title>e:enabled, e:disabled</title>
<style type= "Text/css" >
Input[type= "Text"]:enabled {background-color:yellow;}
Input[type= "text"]:d isabled {background-color:purple;}
</style>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("Input[name=ena]"). Change (function (event) {
var element = Event.target;
if (element.checked && element.value = = "true") {
$ ("input[name=tx]"). Removeattr ("Disabled");
} else {
$ ("input[name=tx]"). attr ("Disabled", "disabled");
}
});
});
</script>
<body>
<form>
<fieldset>
<label><input type= "Radio" name= "Ena" value= "true" checked= "Checked"/> Available </label>
<label><input type= "Radio" name= "Ena" value= "false"/> Not available </label>
</fieldset><br/>
<input type= "Text" name= "TX"/>
</form>
</body>
E:read-only and E:read-write Pseudo class selectors
The e:read-only selector is used to specify the style when the element is in read-only state;
The E:read-write selector is used to specify the style when the element is in a non read-only state.
Note: In the Firefox browser, you need to write "-moz-read-only" and "-moz-read-write" in the form.
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title>e:read-only, e:read-write</title> this article link http://www.cxybl.com/html/wyzz/CSS/20130614/38594.html
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
