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

智言 2017-04-23 4 分钟阅读 0 评论

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

code

<!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/

#个性表单 #字符字体 #表单美化

读完了点一下，作者能得积分

赞赏

如果这篇内容帮到了你，不妨请作者喝杯咖啡

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

发表评论

发表评论取消回复

发表评论

发表评论 取消回复

发表评论取消回复