label--input
.form-group {
margin-bottom: 15px;
position: relative;
}
.control-label{
float: left;
width: 15%;
text-align: right;
padding-right: 20px;
padding-top: 7px;
}
.form-control{
float: left;
width: 50%;
}
.form-control input{
display: block;
width: 100%;
height: 34px;
padding: 0 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
outline: none;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 4px;
}
.s-r{
height: 34px;
line-height: 34px;
position: absolute;
top: 25px;
right: 0;
z-index: 2;
display: block;
}
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom:1;
}
<div class="form-group clearfix">
<label for="inputPassword3" class="control-label">Password</label>
<div class="form-control">
<input type="text" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group clearfix">
<label for="inputPassword2" class="control-label">Password</label>
<div class="form-control">
<input type="text" id="inputPassword2" placeholder="Password">
</div>
</div>
<div class="form-group clearfix">
<label for="inputPassword1" class="control-label">Password</label>
<div class="form-control">
<input type="text" id="inputPassword1" placeholder="Password">
</div>
<span class="s-r">元</span>
</div>
<label>
<input type="checkbox" />
记住用户名
</label>
label--input的更多相关文章
- $("label + input") 匹配所有紧接在 prev 元素后的 next 元素
描述: 匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name= ...
- label+input实现开关切换效果
Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px ...
- jQuery改变label/input的值,改变class,改变img的src
jQuery改变label/input的值.改变class,改变img的src jQuery改变label的值: $('#aID').text("New Value"); jQue ...
- html5 填表 表单 form label input button legend fieldset
<form>本身没有什么意义, 但是某些依赖form的标签元素一旦没有了form就不能生效. 所以form是提供一个定义环境给form的插件元素去生效的. 1.method 属性pos ...
- label+input实现按钮开关切换效果
label+input实现按钮开关切换效果 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 纯 CSS 利用 label + input 实现选项卡
clip 属性 用于剪裁绝对定位元素. .class { position:absolute; clip:rect(0px,60px,200px,0px); } scroll-behavior: sm ...
- label和input里面文字不对齐的解决方法!
测试了集中方法,发现不行.只能用专署标签解决这个问题. <fieldset> <legend>神光咨询后台管理登录</legend> <br /& ...
- label、input、table标签
<label>标签 <form> <label for="male">Male</label> <input type=&qu ...
- HTML label标签的for属性--input标签的accesskey属性
本次示例是在firefox演示(如果其他浏览器对accesskey操作不成功的,请参考文章最后各浏览器下的快捷键)label的for属性是和input的id绑定,当我们点击input前面的文本标识会自 ...
- label与input间距的小问题
先码后文 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
随机推荐
- 用js内置对象XMLHttpRequest 来用ajax
步骤: /* 用XMLHTTPRequest来进行ajax异步数据交交互*/ 主要有几个步骤: //1.创建XMLHTTPRequest对象 //最复杂的一步 if (window.XMLHttpRe ...
- split陷阱
如果split最后一个为空,则要这么写 String[] lines=line.split(",",-1);
- [转][darkbaby]任天堂传——失落的泰坦王朝(下)
即使是日本业界人士也对1999年发生的“口袋妖怪所有权风波”知之甚少,实际上这个事件的结局足以改变游戏产业未来数十年的势力图,山内溥凭借着个人的睿智让任天堂再次渡过了命运的暗礁,而另一颗曾经炙手可热的 ...
- php---进行RSA进行非对称加密
参考文档: https://blog.csdn.net/zhihua_w/article/details/74002212 http://www.bm8.com.cn/webtool/rsa/http ...
- 图论-桥/割点/双连通分量/缩点/LCA
基本概念: 1.割点:若删掉某点后,原连通图分裂为多个子图,则称该点为割点. 2.割点集合:在一个无向连通图中,如果有一个顶点集合,删除这个顶点集合,以及这个集合中所有顶点相关联的边以后,原图变成多个 ...
- Elasticsearch 索引、更新、删除文档
一.Elasticsearch 索引(新建)一个文档的命令: curl XPUT ' http://localhost:9200/test_es_order_index/test_es_order_t ...
- 微信 获取wx.config 参数 基类
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- Oracle to_date()函数的用法介绍
to_date()是Oracle数据库函数的代表函数之一,下文对Oracle to_date()函数的几种用法作了详细的介绍说明,需要的朋友可以参考下 在Oracle数据库中,Oracle t ...
- 使用nginx服务器如果遇到timeou情况时可以如下设置参数,使用fastcgi: fastcgi_connect_timeout 75; 链接 fastcgi_read_timeout 600; 读取 fastcgi_send_timeout 600; 发请求
使用nginx服务器如果遇到timeou情况时可以如下设置参数,使用fastcgi: fastcgi_connect_timeout 75; 链接 fastcgi_read_timeout 600; ...
- 2018/03/30 每日一个Linux命令 之 创建用户/密码
感悟: 感觉每天学习下指令真的很不错,虽然感觉也没啥东西,但是真的用到了,马上就能想起来个大概,忘了详细的用法,就回来看看自己的博客. 话说今天GitHub上有个人 star 了我的项目,很开心,嘎嘎 ...