input,textarea,select設置默認字體樣式

本文轉載自查看原文 2020-03-12 10:42 995 HTML

 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 input、select默認字體顏色 sublime設置默認字體樣式 input和textarea框中點擊文字消失,默認字體是灰色,,輸入時字體變成黑色改變form里面input,textarea.select等的默認樣式 Ueditor設置默認字體去除input和textarea的默認樣式 Thunderbird中默認字體及簽名的設置 Sublime Text設置默認字體 select input 默認樣式修改 jQuery select默認字體灰色，選中黑色