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

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>

 

                                                                                                                                                                                                                                                                            

你可能感兴趣的:(input)