博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
form注册表单圆角 demo
阅读量:4502 次
发布时间:2019-06-08

本文共 1282 字,大约阅读时间需要 4 分钟。

form注册表单圆角

 

<BODY>

<div class="form">
<ul class="list">
<li>
<label>用户名:</label>
<div class="circle-box user">
<input type="text" placeholder="5之6位字母或数字组合"/>
</div>
</li>
<li>
<label>用户名:</label>
<div class="circle-box user">
<input type="text" value="一路小串走向胜利" οnfοcus="this.value=''"
οnblur="if(this.value==''){this.value='一路小串走向胜利'}" class="value"/>
</div>
</li>
</ul>
</div>

</BODY>

 

============================

 

.form {

width: 600px;
height: 600px;
margin: 100px auto;
background: #FBFBFB;
border: 1px transparent dashed;
}
.list {
width: 550px;
margin: 20px auto;
}
.list li {
width: 550px;
height: 40px;
margin-top: 15px;
}
.list label {
width: 110px;
height: 40px;
display: inline-block;
font-size: 16px;
line-height: 40px;
text-align: right;
float: left;
margin-right: 20px;
}
.list .circle-box {
width: 320px;
height: 40px;
border: 1px #D9D9D9 solid;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
}
.list .user {
background: url(../images/img50.png) no-repeat left center;
}
.list input{
width: 266px;
height: 36px;
line-height:36px\9;
margin-left: 47px;
margin-top: 1px;
border: none;
font-size: 16px;
padding-left: 6px;
}
.list .value{
color: #A9A9A9;
}

 

============================

 

转载于:https://www.cnblogs.com/leshao/p/4651722.html

你可能感兴趣的文章
oracle汉字转拼音
查看>>
easyloader [easyui_1.4.2] 分析源码,妙手偶得之
查看>>
动态规划
查看>>
[ 订单查询 ] 性能 高并发 : 分表 与 用户id%1024 存放表
查看>>
表格隔行变色_jQuery控制实现鼠标悬停高亮
查看>>
对于BFS的理解和部分例题(
查看>>
es5语法下,javascript如何判断函数是new还是()调用
查看>>
kaggle kernel使用指南
查看>>
数据不平衡问题的处理
查看>>
Django学习之天气调查实例(3):部署静态文件CSS、JS、images等(部署环境基于Ubuntu)...
查看>>
Pro Git阅读笔记--part1
查看>>
Python os 获取目录地址
查看>>
Oracle误删数据文件后出现oracle initialization or shutdown in progress解决
查看>>
叉乘(一)——左边还是右边
查看>>
Css Html 大风车
查看>>
Oracle数据库连接时“The Network Adapter could not establish the connection”“网络适配器无法建立连接问题”...
查看>>
awk用法
查看>>
关于近似装箱问题的思考。
查看>>
Java父类对象调用子类实体:方法重写与动态调用
查看>>
Prime 算法的简述
查看>>