直接上代码

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

  

效果:

说明:

首先要将input输入框的默认样式去掉

  1. -web-kit-appearance:none;
  2. -moz-appearance: none;

  

然后我们加上边框和圆角,并设置input的高度和字体大小和颜色

  1. font-size:1.4em;
  2. height:2.7em;
  3. border-radius:4px;
  4. border:1px solid #c8cccf;
  5. color:#6a6f77;

  

然后将input输入框的轮廓去掉:

  1. outline:0;

  

  1.  
  2. 修改placeholder的样式
  1. ::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  2. color: #6a6f77;
  3. }
  4. ::-moz-placeholder { /* Mozilla Firefox 19+ */
  5. color: #6a6f77;
  6. }
  7. input::-webkit-input-placeholder{
  8. color: #6a6f77;
  9. }

  

获得焦点时显示红色:

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

  

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

  1. 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. C#-Parallel

    using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.Li ...

  2. Java 之 OutputStreamReader类

    OutputStreamReader类 1.概述 转换流 java.io.OutputStreamReader ,是Writer的子类,是从字符流到字节流的桥梁. 它使用指定的字符集将字符编码为字节. ...

  3. Java 之 递归

    一.概述 递归:指在当前方法内调用自己的现象. 递归的分类: 递归分为两种,直接递归和简介递归 直接递归称为方法自身调用自己 间接递归可以 A 方法调用 B 方法,B 方法调用 C 方法,C 方法调用 ...

  4. SAP Cloud for Customer的Container应用设计原理

    来自Jerry的同事,Yang Joey. 相信大部分C4C的UI developer包括我刚开始的时候都会比较好奇我们平时写的javascript代码是如何运行在移动设备上的,同样的,我也对这个问题 ...

  5. Linux 非互联网环境安装依赖包

    1 介绍 有的生产环境是没有网络的,我们部署rpm包的时候会出现缺少很多rpm包的依赖问题,都去网上下载实在太麻烦,今天介绍一个办法可以解决这一问题. 2 解决方案 找一台可以联网的机器,在上边下载相 ...

  6. python urllib应用

    urlopen 爬取网页 爬取网页 read() 读取内容 read() , readline() ,readlines() , fileno() , close() :这些方法的使用方式与文件对象完 ...

  7. [dev][ipsec] 基于路由的VPrivateN

    VPrivateN的配置分两个模式 1. 基于策略的VPrivateN ( policy based) 2. 基于路由的VPrivateN (route based) 以strongswan为例, 在 ...

  8. [Git]checkout 指定版本

    Task:知道commit号,如何checkout 指定版本 1. 切换到master: git checkout master 2. 下载最新代码:  git pull 3. 下载head: git ...

  9. 【OF框架】在部署中使用 Windows身份认证

    准备 了解Windows身份认证相关知识及原理 框架开发项目完成,并完成发布包,完成在IIS中部署. 框架支持对Windows身份认证的实现,仅需要通过配置节进行配置即可切换,可以在部署的时候配置即可 ...

  10. 常用实验报告LaTex 模板

    目录 模板1-无首页有表格头 模板2-有首页 模板1-无首页有表格头 % -*- coding: utf-8 -*- \documentclass{article} \usepackage{listi ...