修改input输入框的样式
直接上代码
- <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输入框的样式的更多相关文章
- css样式之input输入框默认样式
帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...
- jquery 修改input输入框的 readOnly属性 && input输入框隐藏
html的代码 <div class="control-group"> <label class="control-label required&quo ...
- 修改input标签输入样式
去掉input自带的边框: border-style:none;修改input输入的文字样式: input{ font-size: 24px; color:#5d6494; } 修改input框中占位 ...
- Bootstrap修改input file默认样式
html部分 <div class="form-group"> <label class="col-sm-3 control-label"&g ...
- 修改 Input placeholder 的样式
::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } :-moz-placeholder { /* Mozilla Fi ...
- 使用<label>标签修改input[type="checkbox"]的样式
因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...
- Css——设置input输入框光标颜色
在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况.谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢? 上面描述的情景有两种实现方式 ...
- HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式
HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式 兼容性代码: input::-webkit-input ...
- html中input提示文字样式修改
在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字.我们只需要在<input>标签里添加:placeholder="提示文字 ...
随机推荐
- C#-Parallel
using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.Li ...
- Java 之 OutputStreamReader类
OutputStreamReader类 1.概述 转换流 java.io.OutputStreamReader ,是Writer的子类,是从字符流到字节流的桥梁. 它使用指定的字符集将字符编码为字节. ...
- Java 之 递归
一.概述 递归:指在当前方法内调用自己的现象. 递归的分类: 递归分为两种,直接递归和简介递归 直接递归称为方法自身调用自己 间接递归可以 A 方法调用 B 方法,B 方法调用 C 方法,C 方法调用 ...
- SAP Cloud for Customer的Container应用设计原理
来自Jerry的同事,Yang Joey. 相信大部分C4C的UI developer包括我刚开始的时候都会比较好奇我们平时写的javascript代码是如何运行在移动设备上的,同样的,我也对这个问题 ...
- Linux 非互联网环境安装依赖包
1 介绍 有的生产环境是没有网络的,我们部署rpm包的时候会出现缺少很多rpm包的依赖问题,都去网上下载实在太麻烦,今天介绍一个办法可以解决这一问题. 2 解决方案 找一台可以联网的机器,在上边下载相 ...
- python urllib应用
urlopen 爬取网页 爬取网页 read() 读取内容 read() , readline() ,readlines() , fileno() , close() :这些方法的使用方式与文件对象完 ...
- [dev][ipsec] 基于路由的VPrivateN
VPrivateN的配置分两个模式 1. 基于策略的VPrivateN ( policy based) 2. 基于路由的VPrivateN (route based) 以strongswan为例, 在 ...
- [Git]checkout 指定版本
Task:知道commit号,如何checkout 指定版本 1. 切换到master: git checkout master 2. 下载最新代码: git pull 3. 下载head: git ...
- 【OF框架】在部署中使用 Windows身份认证
准备 了解Windows身份认证相关知识及原理 框架开发项目完成,并完成发布包,完成在IIS中部署. 框架支持对Windows身份认证的实现,仅需要通过配置节进行配置即可切换,可以在部署的时候配置即可 ...
- 常用实验报告LaTex 模板
目录 模板1-无首页有表格头 模板2-有首页 模板1-无首页有表格头 % -*- coding: utf-8 -*- \documentclass{article} \usepackage{listi ...