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>