在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. ios NSFileManager 用法详解

    转自:http://blog.csdn.net/ios_che/article/details/7287266 iPhone文件系统NSFileManager讲解是本文要介绍的内容,主要是通过ipho ...

  2. josephus 问题的算法(转载)

    Josephus 问题: 一群小孩围成一个圈,任意假定一个数 m,从第一个小孩起,顺时针方向数,每数到第 m 个小孩时,该小孩便离开.小孩不断离开,圈子不断缩小,最后剩下的一个小孩便是胜利者.究竟胜利 ...

  3. Backbone学习记录(6)

    路由 backbone将路由规则和一个方法名绑定到一起,来控制单页的hash,以及单页的前进后退. var UserRouter = Backbone.Router.extend({ routes: ...

  4. 文件共享服务 FTP,NFS 和 Samba

    DAS DAS 指 Direct Attached Storage,即直连附加存储,这种设备直接连接到计算机主板总线上,计算机将其识别为一个块设备,例如常见的硬盘,U 盘等,这种设备很难做到共享. N ...

  5. jQuery选择器之表单元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  6. SEO & HTML语义化

    SEO SEO的概念:搜索引擎优化,常见的搜索引擎有百度.谷歌等.优化的话,就是通过我们的处理,使得我们的网站在搜索引擎下有一个理想的结果. SEO的目的:当用户在搜索引擎上搜索关键词的时候,看到我们 ...

  7. windows 查看某端口被占用情况

    百度经验 http://jingyan.baidu.com/article/3c48dd34491d47e10be358b8.html 基本命令 netstat -ano

  8. FileZilla Server 端设置passive模式注意事项

    1,需求和问题的产生 实践中需要分布在各地的各个客户端向云端服务器上传文件,因此在阿里云服务器上安装了FileZilla Server软件作为文件FTP服务端. 客户端程序采用FTP方式向服务端传输文 ...

  9. mysql出错排查

    1,例如:Can't connect to local MySQL server through socket '/tmp/mysql-5.5.37.sock' (2) Mysql链接出错,请配置/A ...

  10. UVA 11020 Efficient Solutions (BST,Splay树)

    题意:给n个坐标.一个坐标(x,y)若有无存在的坐标满足x1<x && y1<=y  或  x1<=x && y1<y 时,此坐标(x,y)是就 ...