在CSS中,我們可以使用表格來展示數(shù)據(jù)。但是在一些場(chǎng)合下,我們需要在表格的第一列加入復(fù)選框,便于用戶對(duì)數(shù)據(jù)進(jìn)行選擇和操作。
<table> <thead> <tr> <th><input type="checkbox"></th> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>張三</td> <td>30</td> <td>男</td> </tr> <tr> <td><input type="checkbox"></td> <td>李四</td> <td>25</td> <td>女</td> </tr> <tr> <td><input type="checkbox"></td> <td>王五</td> <td>40</td> <td>男</td> </tr> </tbody> </table>
在上面的代碼中,我們使用了<input>標(biāo)簽來創(chuàng)建復(fù)選框。而在第一列的<th>和<td>中,分別嵌套了一個(gè)<input>標(biāo)簽,從而實(shí)現(xiàn)了每行第一列的復(fù)選框。
接下來,我們可以使用CSS對(duì)復(fù)選框進(jìn)行樣式美化。
input[type="checkbox"] { appearance: none; /*去除默認(rèn)樣式*/ width: 15px; height: 15px; border: 1px solid #ccc; border-radius: 3px; outline: none; cursor: pointer; } input[type="checkbox"]:checked { background-color: #008cba; border-color: #008cba; color: #fff; }
在上面的代碼中,我們首先使用appearance: none;
去除了默認(rèn)的復(fù)選框樣式,并設(shè)置了一些樣式屬性,如寬度、高度、邊框等。同時(shí),我們還使用了偽類選擇器:checked
,使選中的復(fù)選框呈現(xiàn)出不同的樣式,如背景色、字體顏色等。
使用上述的代碼,我們可以很輕松地實(shí)現(xiàn)表格中第一列的復(fù)選框,并對(duì)其進(jìn)行樣式美化。