直接上代码

<style>
.input{
-web-kit-appearance:none;
-moz-appearance: none;
font-size:1.4em;
height:2.0em;
border-radius:5px;
border:1px solid #c8cccf;
color:#6a6f77;
outline:0;
text-align:center;
}
.input:focus{
border:1px solid #ff0000;
}
</style>
<div style="border:4px dashed #ccc;margin:100px;padding:50px;width:500px;">
自定义输入框样式:<input type="text" class="input" placeholder="请输入" onfocus="this.placeholder=''" onblur="this.placeholder='请输入'"/>
</div>

  

效果:

说明:

首先要将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;

  


修改placeholder的样式
::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #6a6f77;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #6a6f77;
}
input::-webkit-input-placeholder{
color: #6a6f77;
}

  

获得焦点时显示红色:

.input:focus{
border:1px solid #ff0000;
}

  

点击的时候,去掉placeholder文本:

placeholder="请输入" onfocus="this.placeholder=''" onblur="this.placeholder='请输入'"

  

参考:https://blog.csdn.net/qq_35718410/article/details/52149894

修改input输入框的样式的更多相关文章

  1. css样式之input输入框默认样式

    帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...

  2. jquery 修改input输入框的 readOnly属性 && input输入框隐藏

    html的代码 <div class="control-group"> <label class="control-label required&quo ...

  3. 修改input标签输入样式

    去掉input自带的边框: border-style:none;修改input输入的文字样式: input{ font-size: 24px; color:#5d6494; } 修改input框中占位 ...

  4. Bootstrap修改input file默认样式

    html部分 <div class="form-group"> <label class="col-sm-3 control-label"&g ...

  5. 修改 Input placeholder 的样式

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } :-moz-placeholder { /* Mozilla Fi ...

  6. 使用<label>标签修改input[type="checkbox"]的样式

    因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...

  7. Css——设置input输入框光标颜色

    在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况.谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢? 上面描述的情景有两种实现方式 ...

  8. HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式

    HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式  兼容性代码: input::-webkit-input ...

  9. html中input提示文字样式修改

    在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字.我们只需要在<input>标签里添加:placeholder="提示文字 ...

随机推荐

  1. 如何将SolidWorks文件另存为.obj文件及如何打开.obj格式文件

    原网站:http://fans.solidworks.com.cn/forum.php?mod=viewthread&tid=40238) OBJ文件是Alias Wavefront公司为它的 ...

  2. 记https在Android浏览器无法访问

    问题描述 M站静态资源单独配置的https域名,在Android原生浏览器里面打开之后提示证书不安全,在chrome.UC之类的浏览器之下,静态资源都能够正常访问 问题原因 CA证书链不完整 http ...

  3. iOS - starckView 类似Android线性布局

    同iOS以往每个迭代一样,iOS 9带来了很多新特性.UIKit框架每个版本都在改变,而在iOS 9比较特别的是UIStackView,它将从根本上改变开发者在iOS上创建用户界面的方式.本文将带你学 ...

  4. linux配置sftp简单过程

    首先疑惑是,  他需要的是上级的目录权限必须为root, 这点我有点不明白 环境是centos7.6 ssh 首先开整/etc/ssh/sshd_config # override default o ...

  5. Linux中条件语句

    Linux中备份一个jar包,需要既判断进程是否停止,又判断文件是否存在 1. 进程停了,文件存在则备份 2.进程停了,文件不存在,无需备份 3. 进程在跑,停止进程:文件存在,将文件进行备份 4. ...

  6. 【FRDM-K64F学习笔记】使用ARM mbed和Keil MDK下载你的第一个程序

    FRDM-K64F开发平台采用MK64FN1M0VLL12微控制器.该控制器包含一个带有浮点单元的ARM Cortex-M4内核.其最高工作频率为120MHz,具有256KB的RAM.1MB闪存以及许 ...

  7. JVM系列三:内存分配与回收策略

    内存分配策略 1.对象优先分配在新生代Eden区 多数情况下,对象分配在新生代的Eden,若Eden区域内存不够,则引发一次Minor GC 2.大对象直接进入老年代 大对象直接分配在老年代,避免新生 ...

  8. Codeforces #369 (Div. 2) C. Coloring Trees (3维dp

    http://codeforces.com/group/1EzrFFyOc0/contest/711/problem/C https://blog.csdn.net/qq_36368339/artic ...

  9. [终章]进阶20-流程控制结构--if/case/while结构 - 三个while的存储过程案例(批量生成表单数据) - 随机长度的随机字符串的存储过程案例

    . mysql 存储过程中尽量使用 @变量 而不用局部变量, @变量不容易报错!权限小,更改一下就报错! . sql中判断相等'=' ,用'=' 不用'=='. . #流程控制结构 /* 顺序结构: ...

  10. flask中使用ajax 处理前端请求,结果展示在同一页面,不点击页面不展示

    在同一页面点击按钮,后端处理后展示在同一页面,不点击隐藏该结果:与上一篇大同小异,需要在 html.flask.js微调 效果展示: (未点击查询) (点击查询) html: <html> ...