文本框是最为常用的表单元素,可以使用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