使用CSS3實(shí)現(xiàn)input多選框自定義樣式

daryl 發(fā)布于2019-08-30 15:44 / 2456人閱讀

摘要：原理首先把元素隱藏掉，然后用設(shè)置元素其他元素也可以的樣式，選中時(shí)的樣式使用選中，無(wú)須使用圖片和效果預(yù)覽代碼男女代碼清楚默認(rèn)樣式讓層級(jí)高于，使之能選中這里顯示矩形的一半邊框再旋轉(zhuǎn)度來(lái)實(shí)現(xiàn)對(duì)勾樣式

原理：首先把input元素隱藏掉，然后用CSS設(shè)置label元素（其他元素也可以）的樣式，選中時(shí)的樣式使用input:check+label選中l(wèi)abel，無(wú)須使用圖片和JS

效果預(yù)覽

html代碼

CSS代碼

.radio {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio input {
    width: 15px;
    height: 15px;
    appearance: none;/*清楚默認(rèn)樣式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    z-index: 8; /*讓input層級(jí)高于label，使之能選中*/
    
}

.radio label {
    position: absolute;
    left: 0;
    top: 6px;
    width: 15px;
    height: 15px;
    border: 1px solid #3582E9;
}

.radio input:checked+label::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    /* 這里顯示矩形的一半邊框再旋轉(zhuǎn)45度來(lái)實(shí)現(xiàn)對(duì)勾樣式 */
    width: 5px;
    height: 12px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
}

GPU云服務(wù)器云服務(wù)器多選框 asp 多選框 html的多選框獲取html多選框

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116091.html

相關(guān)文章

【譯】HTML表單高級(jí)樣式

摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫(kù)和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了，但離其支持高級(jí)表單組件仍然遙遙無(wú)期。其表單部分挺有用的。系列文章說(shuō)明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現(xiàn)在我們得來(lái)探索HTML表單樣式的那...

caikeal 2019-08-29 10:59 評(píng)論0 收藏0
【譯】HTML表單高級(jí)樣式

摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫(kù)和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了，但離其支持高級(jí)表單組件仍然遙遙無(wú)期。其表單部分挺有用的。系列文章說(shuō)明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現(xiàn)在我們得來(lái)探索HTML表單樣式的那...

Jacendfeng 2019-08-01 15:29 評(píng)論0 收藏0
form表單那點(diǎn)事兒(上) 基礎(chǔ)篇

摘要：用于或元素時(shí)，將提交指定的表單示例代碼只能上傳圖片只能上傳視頻使用的屬性，是一個(gè)類(lèi)型的值，或文件后綴名。在以前，要想改變表單元素外觀，需要通過(guò)其他標(biāo)簽來(lái)模擬。以下點(diǎn)到名的表單元素，還是可以照常使用的。做為html中最為常見(jiàn)，應(yīng)用最廣泛的標(biāo)簽之一，form常伴隨前端左右。了解更深，用的更順。表單屬性這個(gè)表單展示了form表單常用的屬性屬性名屬性值 ...

Forest10 2019-08-01 15:24 評(píng)論0 收藏0
HTML表單元素及CSS

摘要：表單一介紹標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。屬性值被提交表單的類(lèi)型二表單組件組件一般被定義在表單中標(biāo)簽中標(biāo)簽表示輸入框，為空標(biāo)簽。屬性，屬性規(guī)定要顯示的元素的類(lèi)型。冒號(hào)表示分隔符，分號(hào)表示結(jié)束符。表單一、介紹標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。屬性：action-提交表單的地址 Method-提交表單的方式。屬性值：get/post ...

MyFaith 2019-08-30 13:48 評(píng)論0 收藏0
HTML表單元素及CSS

摘要：表單一介紹標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。屬性值被提交表單的類(lèi)型二表單組件組件一般被定義在表單中標(biāo)簽中標(biāo)簽表示輸入框，為空標(biāo)簽。屬性，屬性規(guī)定要顯示的元素的類(lèi)型。冒號(hào)表示分隔符，分號(hào)表示結(jié)束符。表單一、介紹標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。屬性：action-提交表單的地址 Method-提交表單的方式。屬性值：get/post ...

jayzou 2019-08-01 17:50 評(píng)論0 收藏0