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="一路小串走向胜利" onfocus="this.value=''"
onblur="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;
}

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

form注册表单圆角 demo的更多相关文章

  1. 基于HTML5手机登录注册表单代码

    分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  2. CSS3制作分步注册表单

    这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...

  3. layui模板注册表单

    今天晚上用layui模板做了一个简单的注册表单,功能主要有可以js验证密码重复,可以验证手机号码. 这是界面 下面是我的html文件代码 <!DOCTYPE html> <html ...

  4. Html注册表单示例

    注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>.   <html>   <head>   <title>注册表单&l ...

  5. 免费 PSD 下载： 20个精美的登录和注册表单

    注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...

  6. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  7. HTML6注册表单输入日志标题

    一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...

  8. 阻止form空表单提交----JavaScript

    网上看到很不错的阻止form空表单提交 第一种方法 <div class="warp"> <h2>登录到pfan空间</h2> <p> ...

  9. 4.前端注册表单验证 && 表单回填

    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...

随机推荐

  1. 关于我之前写的修改Windows系统Dos下显示用用户名的名字再测试

    最近看到蛮多网友反映,自己修改Dos下用户名后出现了很多的问题--今天抽了时间,再次修改测试... ================= Win10下C:\Users\John以账户名称命名的系统文件夹 ...

  2. git实用攻略（二）

    最近团队的版本控制从svn切换到了git,虽说已经使用git有2年多了,也写了一个实用攻略,但是github上的项目使用经验和公司内部团队协作的使用经验还有很多不同.补充下新的使用体会. 首先还是看一 ...

  3. 关于前端框架BootStrap和JQueryUI（以及相应的优秀模板）

    近期两个月因为须要升级公司产品的界面.所以不得不去学习了下原本并不熟悉的前端框架. 这里也是推荐两款BootStrap和JQueryUI. bootstrap使用起始非常easy,首先.须要得到所须要 ...

  4. iOS_4_表情排列

    终于效果图: BeyondViewController.h // // BeyondViewController.h // 04_表情排列 // // Created by beyond on 14- ...

  5. Android ImageLoader（Android-Universal-Image-Loader）【1】概述及使用简单介绍

     Android ImageLoader(Android-Universal-Image-Loader)[1]概述及使用简单介绍 一,前言:为什么要引入Android-Universal-Imag ...

  6. 资深实践篇 | 基于Kubernetes 1.61的Kubernetes Scheduler 调度详解

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯云容器服务团队 源码为 k8s v1.6.1 版本,github 上对应的 commit id 为 b0b7a323cc5a4a ...

  7. Html 段落自动换行

    1.段落换行 在 Html 中,关于段落换行,是我们经常遇见的问题,那么正如我下图没加换行代码所示: 在网页上的显示的样式,是这样的: 你可以看见,原本的样式,不会自动换行.在 div 中,加入一个样 ...

  8. hibernate框架(4)---主键生成策略

    主键生成策略 常见的生成策略分为六种 1.increment 由Hibernate从数据库中取出主键的最大值(每个session只取1次),以该值为基础,每次增量为1,在内存中生成主键,不依赖于底层的 ...

  9. 《程序设计语言——实践之路》【PDF】下载

    程序设计语言--实践之路>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382240 内容简介 本书在美国大学已有使用了十余年,目前被欧 ...

  10. 《大型网站技术架构：核心原理与案例分析》【PDF】下载

    <大型网站技术架构:核心原理与案例分析>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062557 内容简介 本书通过梳理大型网站 ...