CSS input文本框样式

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

代码描述：CSS input 文本框样式。CSS input文本框样式

下载全部收藏

1695 2260

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册