控制a标签的链接效果+控制input复选框+选框文字

Posted on 2015-04-10 13:02  小蕊同学  阅读(376)  评论(0编辑  收藏  举报

1.a:link{color:black;} 控制链接效果
2.a:visited{color:red;} 控制鼠标点下时的效果
3.a:hover{color:yellow;} 控制鼠标滑过的效果
4.a;active{color:black;} 控制链接点过之后的效果
5.cursor:pointer;     鼠标变手型

6.让选中的复选框变文字变红色让input的框自动获取焦点里面的文字变红色

input:focus{color:red;}
input[type="checkbox"]:checked+span{color:#f00;}

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 input:focus{color:red;}
 8 input[type="checkbox"]:checked+span{color:#f00;}
 9 </style>
10 </head>
11 <body>
12 <input type="text" value="1111" autofocus ><br>
13 <input type="text" value="1111"><br>
14 <input type="text" value="1111"><br>
15 <h1>请选择兴趣爱好</h1>
16 <label><input type="checkbox" name="love[]" value="运动"><span>运动</span></label><br>
17 <label><input type="checkbox" name="love[]" value="游泳"><span>游泳</span></label><br>
18 <label><input type="checkbox" name="love[]" value="唱歌"><span>唱歌</span></label><br>
19 </body>
20 </html>

 

                                                                                                                                                                                                                                                                            

Copyright © 2024 小蕊同学
Powered by .NET 9.0 on Kubernetes