文本框是最為常用的表單元素,可以使用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.vxisgr.tw/" />
<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文本框樣式



76 102



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: js js代碼 js實例 javascript javascript代碼 javascript實例 jshtml對象 javascripthtml對象
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表