手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >一个看起来比较舒服值得学习的文本框样式
一个看起来比较舒服值得学习的文本框样式
摘要:一个看起来比较舒服的文本框样式,关键点在黄色背景那几点.form-control{display:block;width:100%;heig...

1

一个看起来比较舒服的文本框样式,关键点在黄色背景那几点

.form-control {

display: block;

width: 100%;

height: 34px;

padding: 6px 12px;

font-size: 14px;

line-height: 1.428571429;

color: #555555;

vertical-align: middle;

background-color: #ffffff;

border: 1px solid #cccccc;

border-radius: 4px;

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

}

.form-control:focus {

border-color: #66afe9;

outline: 0;

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);

box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);

}

【一个看起来比较舒服值得学习的文本框样式】相关文章:

表格边框以虚线显示的css样式

input标签写CSS时需要注意的几点

jQuery DOM操作小结与实例

中文字体在CSS中的英文表达方式

CSS条状图表进度条

垂直三栏布局拥有相同高度的方法

CSS文字大小单位PX、EM、PT

ie6不兼容hover ie6 a hover属性失效解决办法

在input中右边加上一个图标的css样式

网站制作如何用CSS控制超链接样式

精品推荐
分类导航