个人博客
专注IT梦想的地方

利用符号字体美化表单元素

这几天更新了博客模板,然后空闲时间做了一个利用符号字体美化表单,代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo-Radio/checked</title>
        <style media="screen">
        @font-face {
            font-family: 'myfont';
            src: url('./fonts/iconfont.ttf');
           /*src: url('./fonts/iconfont.eot');
           src: url('./fonts/iconfont.svg');
           src: url('./fonts/iconfont.woff');*/
        }
        input[type=radio],input[type=checkbox]{
             width: 18px;
             height: 18px;
             display: inline-block;
             background-color: #e9eef2;
             color: #555;clear:
             none;cursor:
             pointer;line-height: 0;
             outline: 0;
             padding: 0 !important;
             text-align: center;
             ertical-align: middle;
             /*appearance:none;*/
             /*-moz-appearance:none;*/
             -webkit-appearance: none;
        }
        input[type=radio]{
             border-radius: 50%;
        }
        input[type=checkbox]:checked:before, input[type=radio]:checked:before {
             float: left;
             color: #fff;
             font-size: 13px;
             display: inline-block;
             vertical-align: middle;
             width: 15px;
             margin-top: 9px;
             margin-left: 1px;
             font-family: "myfont";
             content: "\e6b5";
       }
       input[type=radio]:checked,input[type=checkbox]:checked{
            background-color: #f66;
       }
       </style>
</head>
<body>
       <input type="radio" name="sig" value="" checked>男
       <input type="radio" name="sig" value="" >女<br>
       <input type="checkbox" name="interest" value="" checked>唱歌
       <input type="checkbox" name="interest" value="">乒乓球
       <input type="checkbox" name="interest" value="">篮球
       <input type="checkbox" name="interest" value="" checked>游泳
</body>
</html>

DEMO地址:https://www.asni.cn/demo/demo6/

赞(5) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » 利用符号字体美化表单元素

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏