在web程序前端页面中,<input>恐怕是用的最多的html元素了,各个需要录入信息的场合都会用到它,一般都会用css来修饰一下使得它更好看。
原始的不加修饰的文本框像下面,有些单调,页面不是很好看。现在我们加一些css,将它修饰一下。
1、先加一个宽度,让文本框的宽度得到控制。
    width:320px;
2、为了防止内边距、边框使文本框宽度和width值不同,需要加上下面的元素。
    box-sizing:border-box;
3、文本框的边框太纤细了,修改一下。
    border:1px solid #ccc;
4、加一个内边距,使得输入框被撑得高一些,因为2中的设置,这不会影响文本框的宽度。
    padding:5px;
5、文本框的四个角都是直角,给它加一点弧度。
    border-radius:3px;
6、再设置一下字体的尺寸。
    font-size:14;
7、最后再加一个字体的设置。
    font- family:"Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
最后出来的效果如下图所示。虽然还是比较朴素,但比原来是不是好了很多?

当然,因为总是会有多个input输入框,不可能每个输入框单独设置这些css属性,最好写成类。
.s1{
    width:320px;
    box-sizing:border-box;
    border:1px solid #ccc;
    padding:5px;
    border-radius:3px;
    font-size:14;
    font- family:"Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","        Microsoft Yahei",sans-serif;
}
 
 

css装饰文本框input的更多相关文章

  1. css中文本框与按钮对不齐解决方案

    我们先对对input标记设定样式,代码如下: html 代码 <form> <input type=”text” name=”text1” id=”text1” /> < ...

  2. html文本框(input)不保存缓存记录

    有的时候js往文本框里赋值,结果在火狐中刷新后,刚才赋的值还在,导致好多麻烦的事情,现总结一下解决办法如下: <input name="bestlovesky"  type= ...

  3. jQuery文本框(input textare)事件绑定方法教程

    jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...

  4. css控制文本框的只读属性的方法

    css 封装整个只读文本框的属性: .TextBoxReadOnly{ border:1px solid #C0C0C0; text-align:left; background-color:#D3D ...

  5. 文本框input:text

      文本框 CreateTime--2017年4月24日10:40:40 Author:Marydon 一.文本框 (一)标签 <input type="text"/> ...

  6. js怎么限制文本框input只能输入数字

    1.说明 本篇文章介绍怎么使用js限制文本框只能输入数字 2.HTML代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1 ...

  7. js限制文本框input只能输入数字

    JS判断只能是数字和小数点. ,文本框只能输入数字代码(小数点也不能输入) 复制代码 代码示例:<input onkeyup="this.value=this.value.replac ...

  8. css实现文本框和下拉框结合的案例

    html 代码部分 <div id="list-name-input" class="list-name-input"> <select ty ...

  9. 通过CSS使文本框中输入的小写字母变大写字母

    在style.css文件中写 .dataField input{text-transform:uppercase;} .dataField textarea {text-transform:upper ...

随机推荐

  1. vs2010 坑爹的BUG

    以前用VS2005的时候,就遇到过一些很奇怪的BUG,比如始终报错,然后把项目文件删除,重新创建一个项目文件,就好了. 今天用VS2010测试程序时,又发现一个坑爹的BUG,这绝对不是我的错! sta ...

  2. 转 OGG Troubleshooting-Database error 1 (ORA-00001: unique constraint ...)

    Q5: After imp data to target, when we start replc process, we find the following error: 2011-11-10 0 ...

  3. LookupError: unknown encoding: idna 的处理方法

    写了一个脚本,想把它打包成exe文件,在python编译器中运行正常,但是打包成.exe文件运行报错 LookupError: unknown encoding: idna 找遍资料终于找到了解决方法 ...

  4. ibatis学习笔记

    步骤: 搭建配置环境:导入相关jar包 配置文件: JDBC连接属性文件 总配置文件 关于每个实体的映射(map.xml)文件 JDBC连接属性文件 jdbc.properties ## mysql ...

  5. Thymeleaf 在项目中的应用及前后端交互的一些知识(1)

    经过一段时间的工作,我的第一个项目已经快要上线了.本篇文章介绍些thymeleaf在工作中的实际应用,但是更多的还是一些前端处理后台数据的一些思路,如果有什么不正确的地方,希望大家指点. 1.th:e ...

  6. 探究SQL添加非聚集索引,性能提高几十倍之谜

    上周,技术支持反映:客户的一个查询操作需要耗时6.1min左右,在跟进代码后,简化了数据库的查询后仍然收效甚微.后来,技术总监分析了sql后,给其中的一个表添加的一个非聚集索引(三个字段)后,同样的查 ...

  7. (转)Synopsys工具简介

    DC Ultra--Design Compiler的最高版本 在Synopsys软件中完整的综合方案的核心是DC UltraTM,对所有设计而言它也是最好级别的综合平台.DC Ultra添加了全面的数 ...

  8. Failed to obtain lock on file /usr/local/nagios/var/ndo2db.lock: Permission denied : Permission denied

    Failed to obtain lock on file /usr/local/nagios/var/ndo2db.lock: Permission denied  : Permission den ...

  9. ubuntu下安装mongo扩展

    安装openssl apt-get install openssl libssl-dev libssl0.9.8 libgtk2.0-dev 安装php-pear apt-get install ph ...

  10. System.currentTimeMillis()与日期之间的相互转换

    System.currentTimeMillis()与日期 之间是可以相互转换的,大多数Android开发者都知道 通过 SimpleDateFormat dateformat = new Simpl ...