input,textarea,select设置默认字体样式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>input,textarea,select默认字体样式设置</title>
 6     </head>
 7     <style>
 8         input {
 9             margin: 0;
10             padding: 0;
11             color: red;
12             font-size: 14px;
13             font-family: "微软雅黑";
14         }
15         
16         input::-webkit-input-placeholder {
17             color: #999999;
18             font-size: 14px;
19             font-family: "微软雅黑";
20         }
21 
22         textarea {
23             margin: 0;
24             padding: 0;
25             color: red;
26             font-size: 14px;
27             font-family: "微软雅黑";
28             resize: none;//除去缩放样式
29         }
30         
31         textarea::-webkit-input-placeholder {
32             color: #999999;
33             font-size: 14px;
34             font-family: "微软雅黑";
35         }
36 
37         select {
38             margin: 0;
39             padding: 0;
40             color: red;
41             font-size: 14px;
42             font-family: "微软雅黑";
43         }
44         
45         //利用CSS伪类，为select添加伪类required，即不能为空；而默认选项(Placeholder)的value为空，触发invalid，实现不选时置灰的效果。
46         select:invalid {
47             color: #999999;
48             font-size: 14px;
49             font-family: "微软雅黑";
50         }
51         
52         option {
53             margin: 0;
54             padding: 0;
55             color: #666666;
56             font-size: 14px;
57             font-family: "微软雅黑";
58         }
59         
60     </style>
61     <body>
62         <input type="" name="" id="" value="" placeholder="input.." />
63         <hr>
64 
65         <textarea rows="1" cols="" placeholder="textarea.."></textarea>
66         <hr>
67 
68         <select name="" required>
69             <option value="" disabled selected hidden>请选择...</option>
70             <option value="">input..</option>
71             <option value="">textarea..</option>
72             <option value="">select..</option>
73         </select>
74         <hr>
75     </body>
76 </html>

一辈子很短，努力的做好两件事就好；第一件事是热爱生活，好好的去爱身边的人；第二件事是努力学习，在工作中取得不一样的成绩，实现自己的价值，而不是仅仅为了赚钱。