css装饰文本框input
2024-08-28 08:20:21
在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;
}
最新文章
- wampserver服务器无法启动（图标颜色不对）
- JavaScript对象状态
- 《ASP.NET Web API 2框架揭秘》样章（PDF版本）
- 『TCP/IP详解——卷一：协议』读书笔记——17
- 深入理解javascript函数系列第一篇——函数概述
- Caffe源码解析1：Blob
- u3d_Shader_effects笔记4 BRDF
- hibernate笔记02
- 【Android】SDK工具学习 - Traceview 和 dmtracedump
- QWidget QMainWindow QDialog 三者区别
- 商务智能（BI）技术
- Failure [INSTALL_FAILED_OLDER_SDK]
- Spring IOC及AOP学习总结
- hdu(2062)-Subset sequence 组合数学
- mvc上传头像加剪裁功能
- 【终极】Dynamic Web Module 3.0 requires Java 1.6 or newer
- python 基础之注释变量常量
- 什么是车辆识别代码(VIN)
- 求f(n)=[n/1]+[n/2]+---+[n/n]的值 简单杂题
- unique_ptr_c++11