文本框优化

最新推荐文章于 2020-07-09 09:48:36 发布

大大大v

最新推荐文章于 2020-07-09 09:48:36 发布

阅读量299

点赞数 1

文章标签： web 界面

本文链接：https://blog.csdn.net/yymonkeydo/article/details/78742964

版权

web前端界面专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文本框优化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入姓名</title>
    <style>
        div,ul,li,input{padding:0;margin:0;}
        ul{list-style:none;}
        body{font:14px/28px "微软雅黑 ";}
        .contact *:focus{outline: none;}
        .contact{width:700px;height:auto;background:#F6F6F6;margin:40px auto;padding: 10px;}
        .contact ul{width: 700px;}
        .contact ul li{border-bottom:1px solid #d0d0d0;padding:4px;}
        .contact ul li label{width:120px;display:inline-block;float:left;}
        .contact ul li input[type=text]{width:200px;height:20px;border:1px solid #AAA;border-radius:4px;padding:3px 8px;background:url(red_asterisk.png) no-repeat #FFF 98%}
        .contact ul li input[type=text]:focus {border:1px solid red;background:url(invalid.png) no-repeat #FFF 98%;}
        .contact ul li input[type=text]{transition:padding .25s;-o-transition: padding .25s;-moz-transition: padding .25s;-webkit-transition: padding .25s;}
        .contact ul li input:focus{padding-right: 70px;}
    </style>
</head>
<body>
    <div class="contact">
        <form action="#" method="post" name="cForm">
            <ul>
                <li>
                    <label>姓名：</label>
                    <input type="text" name="yourname" placeholder="SunBest" required/>
                </li>
            </ul>
        </form>
    </div>
    <div>
        label是内联元素，设置宽也不起作用，所以要设定为display:inline-block;设定宽才有效<br/>
        属性选择器input[type=text]  input中属性为type值为text的才有效<bt/>
        文本获取焦点去除默认发光的框 outline: none;<br/>
        required 不允许空提交<br/>
        border-radius:10px; 圆角<br/>
        过渡 兼容 transition:padding .25s;-o-transition:padding .25s;-moz-transition:padding .25s;-webkit-transition:padding .25;</div>
        动画：transition:padding .25s; padding-right:70px; 右内边距70 0.25s完成动画<br/>

    </div>
</body>
</html>

大大大v

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文本框优化

文本框优化：输入姓名 div,ul,li,input{padding:0;margin:0;} ul{list-style:none;} body{font:14px/28px "微软雅黑 ";} .contact *:focus{outline: none;} .contact{
复制链接

扫一扫