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



137 183



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 html对象 jshtml对象 javascripthtml对象

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到