在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. 毕业设计:HomeFragment(二)

    一.长按item时的响应 在长按item时,我希望能让CheckBox显示出来,并且呼出全选.反选.取消菜单,以及下载.删除.移动.复制操作菜单. 我在具体实现的时候发现处理item布局是一个很大的问 ...

  2. 用户授权policy

    定义策略类 php artisan make:policy PostPolicy app/Policies/PostPolicy.php public function update(User $us ...

  3. 为Qt添加SSL支持

    目标:为Qt添加SSL支持,使得应用可以发送HTTPS请求 环境:win7,Qt4.8.6 步骤: 1.到http://slproweb.com/products/Win32OpenSSL.html下 ...

  4. 洛谷 P3178 [HAOI2015]树上操作

    题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 :把某个节点 x 的点权增加 a .操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 ...

  5. [Github筆記] 清除所有 Commit 紀錄

    # 把原來的 git 移除掉 sudo rm .git -r # 初始化 git init git remote add origin https://github.com/username/repo ...

  6. AWS Data Lake Service Stack

  7. JavaScript轮播图

    需求: 鼠标移动到下标页码时,也转换到相对应的图片: 多张图片可以自动轮播: 鼠标移动至图片时,停止自动轮播: 可以手动左右调节: <!DOCTYPE html> <html lan ...

  8. uva1336 Fixing the Great Wall

    用到了kase避免memset超时 #include<cstdio> #include<cstring> #include<cmath> #include<a ...

  9. python之路——内置函数和匿名函数

    阅读目录 楔子 内置函数 匿名函数 本章小结 楔子 在讲新知识之前,我们先来复习复习函数的基础知识. 问:函数怎么调用? 函数名() 如果你们这么说...那你们就对了!好了记住这个事儿别给忘记了,咱们 ...

  10. JavaSE-02 变量 数据类型和运算符

    学习要点 掌握变量的概念 掌握常用数据类型 掌握赋值运算符.算术运算符 掌握boolean数据类型和关系运算符 掌握变量的概念 面向过程程序的定义 程序的定义:程序=数据+算法+文档 程序要操作的数据 ...