文本框是最为常用的表单元素，可以使用CSS将其修饰的更为美观。
大致可以从如下几个方面进行设置：
（1）.边框。
（2）.背景颜色。
（3）.字体颜色。
（4）.设置光标颜色。
（5）.获取焦点。
下面将通过代码进行一下进行一下介绍，最后给出一个完整的代码实例。
为了节省篇幅，后面的代码大多使用代码片段，而不是完整代码。
一.设置边框样式：
<style>
input{border:1px solid blue;}
</style>
通过border属性设置input文本的样式。
<style>
input{
border:1px solid blue;
background-color:#ccc;
}
</style>
通过background-color属性可以设置文本框字体颜色。
三.设置字体颜色：
<style>
input{
border:1px solid blue;
background-color:#ccc;
color:red;
}
</style>
通过color属性即可实现设置文本字体颜色即可。
四.设置光标颜色：
本文对设置光标颜色不做介绍。
五.获取焦点：
<style>
input{
border:1px solid blue;
background-color:#ccc;
color:red;
}
input:focus{
color:green;
}
</style>
通过:foucs选择器可以设置文本框获取焦点时的样式。
代码实例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>CSS input文本框样式</title>
<style>
input{
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px;
padding-left:5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
input:focus{
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
</style>
</head>
<body>
<input id="text"/>
</body>
</html>
1.《CSS input文本框样式》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《CSS input文本框样式》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/255.html