HTML的checkbox和radio樣式美化的簡單實例

2019-10-26 17:18:25

字體：大中小

來源：轉載

供稿：網友

checkbox：

上一篇：PHP-HTMLhtml重要知識點筆記(必看)

下一篇：html+css3太陽系行星運轉動畫效果的實現代碼

{ display: none;

}

input[type="checkbox"] + label {

display: inline-block; position: relative;

border: solid 2px #99a1a7; width: 35px;

height: 35px; line-height: 35px;

border-radius: 4px; }

input[type="checkbox"]:checked + label:after

{ content: '/2714';

font-size: 25px; color: #99a1a7;

width: 35px; height: 35px;

line-height: 35px; position: absolute;

text-align: center; background-color: #e9ecee;

}

.tab {

margin-top: 20px; margin-bottom: 20px;

width: 100%; }

.tab td

{ border: solid 1px #f99;

font-size: 25px; line-height: 39px;

} </style>

<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;"> 測試101

</div> <div align="center" style="float: left; height: 39px; width: 39px;">

</div> <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">

測試102 </div>

測試 </td>

</div> <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">

測試103 </div>

<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;"> 測試104

</div> 測試

</div> </td>

</tr> </table>

<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;"> 測試201

</div> <div align="center" style="float: left; height: 39px; width: 39px;">

</div> <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">

測試202 </div>

</div>

發表評論

共有條評論

用戶名:	密碼:
驗證碼:	匿名發表

學習交流

電腦開不了機的原因和解決辦法

電腦開不了機的原因和解決辦法...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

榮耀總裁趙明烏鎮演講：榮耀首款5G手機V30下月發布

2019-10-23 09:17:05

搜狐張朝陽：回歸媒體是搜狐重新崛起的關鍵

2019-10-21 09:20:02

華為輪值董事長郭平：虛擬技術創造現實價值

2019-10-21 09:00:12

滴滴英文服務上線兩周年用戶已超200萬

2019-09-26 08:57:12

華為推出全球至快AI訓練集群Atlas900

2019-09-25 08:46:36

馬斯克：特斯拉正組建中國技術團隊

2019-09-25 08:15:43

疑難解答

圖片精選

網友關注