修改input输入框的样式
原文地址为: 修改input输入框的样式
我们在写表单的时候,经常需要自定义表单的样式,当然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的边框有点虚,实际效果比这个好,这样就完成了一个简单漂亮的表单了。
转载请注明本文地址: 修改input输入框的样式
修改input输入框的样式相关推荐
- elemen-UI 组件:input输入框 的 样式、代码、效果图对比 - 应用篇
elemen-UI 输入框组件的样式问题:+栅格系统 使用可定义宽度等细节处理 提示:具体参考项目为准. 效果图对比: 代码如下:(2种) <el-form :model="form& ...
- 修改input输入框样式
首先要将input输入框的默认样式去掉 -web-kit-appearance:none;-moz-appearance: none; 然后将input输入框的轮廓去掉: outline:0; 完成样 ...
- 修改input标签输入样式
去掉input自带的边框: border-style:none; 修改input输入的文字样式: input{font-size: 24px;color:#5d6494; } 修改input框中占位符 ...
- 微信小程序: input输入框placeholder样式的修改
相信大伙在开发微信小程序的时候都会遇到这种问题.因为客户的需求,所以我们需要对input框中的placeholder的样式进行修改.接下来告诉大家怎么修改,该方法仅适用于微信小程序. 一.我们要给pl ...
- html输入框颜色属性,css 修改input输入框属性
1.修改输入框颜色背景色等 input[type=text] { width: 340px; padding: 0 25px; height: 48px; border: 1px solid #f2f ...
- css3修改input[type=radio]样式
在项目中经常,需要使用单选按钮input[type=radio],但是浏览器的默认样式可能与我们需要实现的样式差距很大,可以使用css3来实现想要达到的效果: <!DOCTYPE html> ...
- 修改input file默认样式
2019独角兽企业重金招聘Python工程师标准>>> 一.第一种实现方式 1.通过一个按钮触发file的click事件: 2.file的click事件触发之后,选择一个文件之后,触 ...
- 如何修改elementui输入框的样式
<style scoped> /deep/ .el-input__inner{height: 40px;}//或者 >>> .el-input__inner{width: ...
- 纯 CSS3 实现漂亮的 input 输入框
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love. 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符 ...
最新文章
- mysql 5.7解压缩,Mysql5.7 windows解压缩ZIP版安装
- 定时备份MySQL数据库
- Android中的“再按一次返回键退出程序”实现
- 回调函数和闭包的理解
- Python MyQR
- kafka 启动_深入理解Kafka服务端之Acceptor线程是如何启动和工作的
- openshift介绍及centos7安装单节点openshift、Redhat安装openshift集群完全教程
- 对象的强、软、弱和虚引用
- 20165301 预备作业二:学习基础和C语言基础调查
- sqlserver免安装_SQL数据分析,如何免安装在线运行?
- [php入门] 3、WAMP中的集成MySQL相关基础操作
- List去除重复的元素
- 【转】Vue.js入门教程(一)从静态页面到前后端分离开发
- Git bash 编码格式配置_02
- AjaxPro无刷新选择列表框/下拉框[方便|稳定]
- linux input子系统分析--子系统核心.事件处理层.事件传递过程
- linux rpm 查找,Linux下 rpm 命令查询方法
- 【java】多线程博客积累
- 史上最强最贵 Mac Pro 诞生,iPadOS 和 iOS 分家!WWDC19 全面总结
- 快速写出matlab的GUI程序