CSS input文本框样式

星火作文 2019-11-18 203 阅读

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

最新游戏