• 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>
    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    python中自定义模块导入
    EditText------Android
    Fragment类实现
    Android文件访问
    python中pip使用国内镜像提高安装速度
    esri/geometry包 (arcgis api for js)
    【CSDN 编辑器 MarkDowm 使用技巧】
    for 循环 :从指定下标开始,并指定步长
    【车牌识别】-车牌中字符分割代码详解
    【 Linux 常用命令】
  • 原文地址:https://www.cnblogs.com/antao/p/12467596.html
Copyright © 2020-2023  润新知