干貨：HTML中“input”背景提示文字美化

通常我們在寫input時，它的背景文字框都是灰色的，樣式很單一，其實它可以做的更好看的，在CSS3中就專門提供了一屬性placeholder來實現輸入框的美化。接下來，就為大家展示下：

HTML：

CSS：

效果：

對于input輸入框的背景提示信息(placeholder)的美化雖然只是對網站應用的小小點綴，但正是這樣細節上的小差別將你的網站和別人的網站區別開來。IE10也支持了placeholder屬性哦！

切版 qieban(.cn)

、 input分類

根據顯示效果將input分為五類

文本框類：type值為text，password。
按鈕類：type值為button，reset，submit。
選框類：type值為checkbox，radio。
圖片類：type值為image。
文件類：type值為file。

二、原始顯示效果

首先我們先看一下上述各類input在瀏覽器中原始顯示效果，代碼如下

     <!-- html-->
     <p>1.文本框類</p>
    <input type="text" class="text" value="文本" />
    <input type="password" class="password" value="密碼" />
    <p>2.按鈕類</p>
    <input type="button" class="button" />
    <input type="reset" class="reset" />
    <input type="submit" class="submit" />
    <p>3.選框類</p>
    <input type="checkbox" class="checkbox" name="" id="" />
    <input type="radio" class="radio" />
    <p>4.圖片類</p>
    <!-- 此處省略了圖片地址-->
    <input type="image" class="image" src="" />
    <p>5.文件類</p>
    <input type="file" class="file" />
    <input type="hidden" class="hidden" />

在pc端各主流瀏覽器中顯示效果如下

在移動端各主流瀏覽器中顯示效果如下

三、自定義樣式（含清除默認樣式）

1. 文本框類

（1）占位文本樣式修改(placeholder)
占用文本樣式修改使用偽元素::placeholder,這偽元素雖然還是一個實驗功能，但是其實已經得到了大部分瀏覽器的支持，如果瀏覽器版本過低可以使用添加前綴來做兼容，MDN文檔給的兼容情況如下圖。

值得注意的是，該偽元素可以支持修改的屬性值有限，具體支持的屬性見下圖

（2）聚焦樣式修改（focus）
聚焦樣式修改使用偽類:focus,該偽類可以支持修改input所有的css屬性，可以放心使用
（3）常規樣式修改
常規樣式例如border，color，font-size的部分都可以直接修改。
（4）清除默認樣式
上面css屬性修改可以覆蓋掉大部分原有的樣式，從而達到清除默認樣式的效果。但是在iOS中input上不會有默認的陰影樣式覆蓋不了，需要使用-webkit-appearance: none;將其清除。
注意：在ios中還有一個與其他瀏覽器不同的地方——當input的line-height大于font-size時，輸入文字時光標長度不對，下圖所示input的line-height=3，可以看出其光標是從input最上方開始的，這樣顯然顯示效果不好，因此我們建議line-height=1，如果需要擴展input的高度，使用padding來實現。

2. 按鈕類

按鈕類input修改默認樣式比較簡單，只需要常規樣式修改和偽類修改。其中偽類:hover和:active比較常用，只要用于修改懸停樣式和點擊樣式。

3. 選框類

選框類input在不同瀏覽器中顯示效果差別很大，因此對于前端開發者來說，自定義樣式是很有必要的。
1）單選框樣式自定義
常用的辦法是隱藏原來的單選框，然后創建一個單選框。以下面代碼為例

<!-- label中for屬性值與input中id值相同即可關聯 -->
<input type="radio" class="radio" name="sex" id="male"  />
<label for="male" class="label">男</label>
<input type="radio" class="radio" name="sex" id="female" />
<label for="female" class="label">女</label>

/*css*/
/* 隱藏原有的ridio選框 */
.radio {
  display: none;
}
.label {
  position: relative; /* 作為定位基準 */
  margin-left: 20px; /* 給label左側添加margin（padding也行），給自定義radio留位置 */
}

/* 自定義radio（未選中）樣式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根據label高度和自身需求設置top*/
}

/* 自定義radio（選中）樣式 */
.radio:checked + .label::before {
  border: 1px solid skyblue;
}
.radio:checked + .label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: skyblue;
  left: -16px;
  top: 7px;
}

顯示效果如下圖

注意

input類元素不支持:before和:after，因此需要靠label來實現；
上例使用了相鄰選擇器來選定元素，這是上述效果得以實現的基礎（ridio和label中間不能添加其他的元素）。

上面的例子只是一種方法，如果不使用為元素，可以在radio和label中間添加一個div作為自定義的radio選框。

2）多選框樣式自定義
多選框樣式自定義與單選框自定義樣式的方式一摸一樣，如下面代碼

<!-- html -->
<input type="checkbox" class="checkbox" name="sex" id="male" />
<label for="male" class="label">男</label>
<input type="checkbox" class="checkbox" name="sex" id="female" checked />
<label for="female" class="label">女</label>
<input type="checkbox" class="checkbox" name="sex" id="undefind" checked />
<label for="undefind" class="label">不明</label>

/* css*/
/* 隱藏原有的checkbox選框 */
.checkbox {
  display: none;
}
.label {
  position: relative; /* 作為定位基準 */
  margin-left: 20px; /* 給label左側添加margin（padding也行），給自定義checkbox留位置 */
}

/* 自定義checkbox（未選中）樣式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根據label高度和自身需求設置top*/
}

/* 自定義checkbox（選中）樣式 */
.checkbox:checked + .label::before {
  border: 1px solid skyblue;
}
.checkbox:checked + .label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: skyblue;
  left: -16px;
  top: 7px;
}

顯示效果如下圖

4. 圖片類

這類input在平常使用較少，如果需要顯示圖片建議直接使用img標簽。

5. 文件類

目前常用的做法是使用元素（一般使用a元素）包裹住input，外層元素樣式即為此次自定義樣式，同時將input透明度設置為0，寬高與外層元素寬高一致，這樣可以保證點擊外層元素是出發input。示例代碼如下

<!-- html -->
<a href="javascript：;" class="file">
  <input type="file" name="" id="" />點擊這里上傳文件
</a>

/* css */
.file {
  padding: 4px 10px;
  height: 20px;
  line-height: 20px;
  position: relative;
  cursor: pointer;
  color: #888;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  zoom: 1;
}
.file input {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity= 0);
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.file:hover {
  color: #444;
  background: #eee;
  border-color: #ccc;
  text-decoration: none;
}

顯示效果如下：

注意：以上操作會隱藏上傳的文件，如果需要顯示，需要額外添加一個元素并且配合使用js用于顯示上傳的文件，在此不過多說明，有興趣的可以自行研究。

果圖截圖：

案例代碼示下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>發光輸入框</title>
 <style type="text/css">
 input{width: 280px;height: 30px;}
 textarea{width: 280px;height: 80px;}
 input,textarea{
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 -ms-transition: all 0.30s ease-in-out;
 -o-transition: all 0.30s ease-in-out;
 outline: none;
 padding: 3px 0 3px 3px;
 margin: 5px 1px 3px 0;
 border: #ddd 1px solid;
 }
 input:focus,textarea:focus{
 box-shadow: 0 0 5px rgba(216,76,41,1);
 padding: 3px 0 3px 3px;
 margin: 5px 1px 3px 0;
 border: rgba(216,76,41,1) 1px solid;
 }
 </style>
 </head>
 <body>
 <input type="text" name="" id="" value="" />
 <textarea></textarea>
 </body>
</html>

注意：

這里使用了css的 transition 動畫屬性。
transition的瀏覽器兼容性，添加瀏覽器廠商前綴。

以上就是關于 “ css實現發光的input輸入框 ” 的全部內容。

在線咨詢

上一篇：HTML基礎篇-17HTML之視頻播放
下一篇：前端程序員入門html的4大方法，這兩本神書真心經典！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商