整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
圖筆記記錄切圖網(wǎng)日常，說(shuō)到網(wǎng)頁(yè)的表單美化 通常需要用到插件，因?yàn)?select，radio，checkbox比較特殊，無(wú)法通過(guò)css直接美化 ，這些也有比較不錯(cuò)的美化插件 可以實(shí)現(xiàn)，不過(guò)這都是早幾年的情況，現(xiàn)在瀏覽器日益更新升級(jí)，對(duì)于html5 css3標(biāo)準(zhǔn)支持的更好，使得我們現(xiàn)在可以通過(guò)css3也可以進(jìn)行美化，沒(méi)有插件參與，就可以省事不少，同時(shí)也可以讓頁(yè)面代碼更加簡(jiǎn)潔，用到了圖片背景，不過(guò)是基于data：image 方式直接引用的，所以不用到實(shí)體圖片。
復(fù)制以下代碼即可實(shí)現(xiàn) 單選 復(fù)選美化，親測(cè)好用。
input[type=”radio”],
input[type=”checkbox”]{
width: 1em;
height: 1em;
margin-top: 0;
vertical-align: top;
appearance: none;
background-color: #fff;
background-image: var(–bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 2px solid #e6e6e6;
print-color-adjust: exact;
cursor: pointer;
border-width: 0.125rem;
width: 1.25rem;
height: 1.25rem;
border-color: #e7e7e7;
}
lt;select>下拉框
<option>是下拉框的選項(xiàng)
<submit>提交按鈕
<value>名稱(chēng)提交方式
<checked>單選按鈕進(jìn)入頁(yè)面必選這個(gè)
<checkbox>多選按鈕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
請(qǐng)選擇你喜歡的水果<br />
<form>
<input type="radio" value="apple" name="fruit" checked="checked"/>蘋(píng)果<br />
<input type="radio" value="orange" name="fruit"/>橘子<br />
<input type="radio" value="mango" name="fruit"/>芒果<br />
<input type="submit" value="提交"/>
</form>
請(qǐng)選擇你喜歡的水果<br />
<form>
<input type="checkbox" value="apple" name="fruit"/>蘋(píng)果<br />
<input type="checkbox" value="orange" name="fruit"/>橘子<br />
<input type="checkbox" value="banana" name="fruit"/>香蕉<br />
<input type="submit" value="提交"/>
</form>
請(qǐng)選擇你喜歡的水果<br />
<form>
<select name="fruit" size="2">
<option value="apple">蘋(píng)果</option>
<option value="orange">橘子</option>
<option value="mango" selected="selected">芒果</option>
</select><br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
注本頭條號(hào)，專(zhuān)注做前端。
經(jīng)常做前端頁(yè)面，單選框、復(fù)選框美化是不可或缺的，考慮到兼容性，我們通常在PC項(xiàng)目中用 —— checkRadio.js 來(lái)做美化，手機(jī)端H5頁(yè)面則可以用css3實(shí)現(xiàn) —— 因?yàn)槭謾C(jī)端全部支持css3，記住這一點(diǎn)。
今天要分享的是純css3美化，外觀很時(shí)尚
//
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
