在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. 135 Candy 分配糖果

    There are N children standing in a line. Each child is assigned a rating value.You are giving candie ...

  2. jquery 选择器包含特殊字符

    选择器包含 : .# ( ] 等等 比如 <div id="id#a"></div> <div id="id[1]">< ...

  3. AJPFX关于对集合中的元素删除操作和注意点

    import java.util.ArrayList;import java.util.Iterator;import java.util.List; public class ForeTest2 { ...

  4. mac下fiddler安装配置启动及iphone配置连接

    Getting started 下载安装Mono 如果没有下载则下载:https://www.mono-project.com/download/stable/#download-mac 从Mozil ...

  5. ZooKeeper读书笔记

    <ZooKeeper读书笔记> 1.Zookeeper是什么?Zookeeper是一个典型的分布式数据一致性的解决方案,分布式应用可以基于它实现诸如数据发布/订阅.负载均衡.命名服务.分布 ...

  6. 基于jmeter和shell的接口性能自动化

    基于jmeter和shell的接口性能自动化 1. 总体需求 由于性能测试中涉及的查询接口多,版本迭代频繁,版本更新后自动跑一轮查询业务的性能,可以及时发现一些开发修复bug触发的非预期的bug,利用 ...

  7. codevs 1422 河城荷取

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master 题目描述 Description 在幻想乡,河城荷取是擅长高科技工业的河童.荷取的得意之作除了光学迷彩外,还有 ...

  8. rmdir

    rmdir——删除空目录 remove empty directories 命令所在路径:bin/rmdir 示例: # rmdir /tmp/japan/longze 删除/tmp/japan/目录 ...

  9. 【C++】双边滤波器(bilateral filter)

    Bilateral Filtering for Gray and Color Images 双边滤波器:保留边界的平滑滤波器. 在局部上,就是在灰度值差异不大的区域平滑,在灰度值差异比较大的边界地区保 ...

  10. SQLite -语法

    SQLite -语法 SQLite是紧随其后的是独特的组称为语法的规则和指导方针.本教程为您提供了快速启动和SQLite的清单的所有基本SQLite语法. 大小写敏感性 注意重要的一点是,SQLite ...