修改input输入框的样式
来源:互联网 发布:oppo软件开放平台 编辑:程序博客网 时间:2024/05/16 15:55
我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢?
下面我们来写个简单的表单
<form action="" method="get"> <div class="input_control"> <input type="text" class="form_input" placeholder="Enter vendor key here"/> </div> <div class="input_control"> <input type="text" class="form_input" placeholder="Enter room name here"/> </div> <div class="input_control"> <input type="text" class="form_input" placeholder="Input key here if use encryption"/> </div> <div class="input_control"> <a id="btn1"><b></b>Join</a> </div> <div class="input_control"> <a id="btn2"><b></b>Video Options</a> </div></form>
首先要将input输入框的默认样式去掉
-web-kit-appearance:none; -moz-appearance: none;然后我们加上边框和圆角,并设置input的高度和字体大小和颜色:
font-size:1.4em;height:2.7em;border-radius:4px;border:1px solid #c8cccf;color:#6a6f77;然后将input输入框的轮廓去掉:
outline:0;这样我们的输入框就差不多好了,input样式完整代码如下:
.input_control{ width:360px; margin:20px auto;}input[type="text"],#btn1,#btn2{ box-sizing: border-box; text-align:center; font-size:1.4em; height:2.7em; border-radius:4px; border:1px solid #c8cccf; color:#6a6f77; -web-kit-appearance:none; -moz-appearance: none; display:block; outline:0; padding:0 1em; text-decoration:none; width:100%;}input[type="text"]:focus{ border:1px solid #ff7496;}
效果如下图:
通过上图的input样式我们可以看出,虽然比默认样式好看了许多,但是还有一些问题,比如placeholder的默认字体颜色是灰色,看起来有点浅,我们继续修改样式,那么如何修改placeholder的样式呢?我们加上如下代码即可:
::-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #6a6f77;}::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #6a6f77;}input::-webkit-input-placeholder{ color: #6a6f77;}修改之后样式如下图:
截图上input的边框有点虚,实际效果比这个好,这样就完成了一个简单漂亮的表单了。
1 0
- 修改input输入框的样式
- input输入框修改placeholder和readonly的样式
- input输入框样式
- input输入框的多种样式
- input输入框的各种样式
- input输入框的各种样式
- Input输入框的各种样式
- 文本框input输入框的各种样式
- input 输入框样式特效
- 修改input输入框的type属性
- 修改Input File的样式
- input框placeholder样式修改
- 修改输入框placeholder的样式
- 修改输入框placeholder文字的样式
- bootstrap 中 input输入框与其他样式的组合
- input输入框的各种样式 文本框为下划线 text输入框样式
- type=file的input框样式修改的方法
- 设置无输入的input样式
- 【Java】堆排序的Java实现
- Java之字节流(文件输入、输出流)
- 字符串------表示数值的字符串
- QT中实现二维码图片生成
- Linux ALSA声卡驱动之一:ALSA架构简介
- 修改input输入框的样式
- UILabel行距设置
- QT写入txt文件
- nodejs连接sqlserver数据库支持事物封装-mssql模块
- tomcat配置文件server.xml详解
- php中filter函数用法之验证邮箱、url和ip地址
- 使用DB Browser辅助配置数据库
- 判断一个控件是否真正显示在主窗口
- 《Thinking in Java》学习笔记-----第6章 访问权限控制