html页面输入框input的美化
input输入框是网页必不可少的组件,可是每个浏览器对于输入框的显示样式各有不同
例如:
上图分别就是谷歌浏览器和IE浏览器自带显示的输入框,样式也不足人意,所以大多都会自己写样式
以下是一个简单的文本框样式
input{
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px; /*css3属性IE不支持*/
padding-left:5px;
}
效果图:
样式属性含义:
border: 1px solid #ccc; /*设置输入框边框,边缘线的颜色、大小、及实线虚线*/
padding: 7px 0px; /*设置输入框高度,也可以用height,但是用height的话,输入框的光标会置于顶部,还要设置其他样式去固定,而且还不一定会兼容很好*/
border-radius: 3px; /*这个属性石css3里面的,IE不支持*/
padding-left:5px; /*让广告距离左边5个像素,一开始光标是贴着左边输入框的边缘的*/
基本上以上的样式算是如今比较常用的了
然后就是input的一些其他的设置
比如:属性 placeholder
这个属性在输入框里有提示文字效果,CSS3属性,不支持IE
input点击发光特效:
input{
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px;
padding-left:5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
input:focus{
border-color: #66afe9;
outline:;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
效果图:
html页面输入框input的美化的更多相关文章
- Android软键盘弹出,覆盖h5页面输入框问题
之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...
- /*用户登录注册页面输入框的设置*/<span>的使用
<!DOCTYPE html> /*用户登录注册页面输入框的设置*/ <html lang="en"> <head> <meta char ...
- 制作输入框(Input)
怎样判断是否应当使用输入框 输入框,就是用户可以自由输入文本的地方.当需要判断是否需要使用输入框时,可以遵循一条原则:凡是需要用户自主输入文本的地方,几乎都必须使用输入框. 输入框的常见用法:输入登录 ...
- 输入框 input只能输入正数和小数点
输入框 input只能输入正数和小数点 限制文本框只能输入正数,负数,小数 onkeyup="value=value.replace(/[^\-?\d.]/g,'')" 限制文本 ...
- div模拟输入框input/textarea
//html<!--填写信息--> <div class="info-wrap"> <form class="formToCheck&quo ...
- palacehoder的自定义样式【输入框input /文本域textarea】
7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和texta ...
- 微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
- input file 美化的方法
css input[type=file] 样式美化,input上传按钮美化 2014年8月29日 113210次浏览 由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[ty ...
- 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头
一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...
随机推荐
- vim中tab转为空格
:set ts=4:set expandtab:%retab!
- web应用中使用JavaMail发送邮件 。。转载
现在很多的网站都提供有用户注册功能, 通常我们注册成功之后就会收到一封来自注册网站的邮件.邮件里面的内容可能包含了我们的注册的用户名和密码以及一个激活账户的超链接等信息.今天我们也来实现一个这样的功能 ...
- SQL Server 2008 R2——使用数字辅助表(master..spt_values)实现用计数字段对记录进行重复显示
=================================版权声明================================= 版权声明:原创文章 谢绝转载 请通过右侧公告中的“联系邮 ...
- 【转】用C写一个简单病毒
[摘要]在分析病毒机理的基础上,用C语言写了一个小病毒作为实例,用TURBOC2.0实现. [Abstract] This paper introduce the charateristic of t ...
- WPF 自定义绕圈进度条
在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码: 1.控件界面 <UserControl x:Class="ProgressBarControl&quo ...
- eclipse编辑jsp保存的时候特别卡解决办法
今天eclipse用着用着的时候,每次编辑jsp页面快捷键保存的时候要等半天才保存好,特别的卡.搞的很蛋疼.上网搜了下有解决办法 Window -> Preference -> Gener ...
- 【转】根据中国气象局提供的API接口实现天气查询
本文转载自 老三 的 三叶草 中国气象局提供了三个天气查询的API接口: [1]http://www.weather.com.cn/data/sk/101190101.html [2]http://w ...
- Java Generics and Collections-2.1
2.1 子类化以及替换原理 为什么List<Integer> 不是List<Number> 的子类? 首先看下面的代码,这段代码是编译不过的 package java_gene ...
- Windows 10 新特性 -- Bing Maps 3D地图开发入门(一)
本文主要内容是讲述如何创建基于 Windows Universal App 的Windows 10 3D地图应用,涉及的Windows 10新特性包括 Bing Maps 控件.Compiled da ...
- Windows+Linux----打造和谐的开发环境
其实Windows和Linux并非水火不容,相反,我觉得,如果将二者结合起来,取长补短,便可打造一个华丽.实用的开发环境. 吾以为,不会用linux的人,不能称为一个程序猿,但是一味觉得Linux很吊 ...