使用CSS3實現input多選框自定義樣式

daryl 發布于2019-08-30 15:44 / 2464人閱讀

摘要：原理首先把元素隱藏掉，然后用設置元素其他元素也可以的樣式，選中時的樣式使用選中，無須使用圖片和效果預覽代碼男女代碼清楚默認樣式讓層級高于，使之能選中這里顯示矩形的一半邊框再旋轉度來實現對勾樣式

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

效果預覽

html代碼

CSS代碼

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

.radio input {
    width: 15px;
    height: 15px;
    appearance: none;/*清楚默認樣式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    z-index: 8; /*讓input層級高于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;
    /* 這里顯示矩形的一半邊框再旋轉45度來實現對勾樣式 */
    width: 5px;
    height: 12px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
}

云服務器 GPU云服務器多選框 asp 多選框 html的多選框獲取html多選框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116091.html

【譯】HTML表單高級樣式

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

caikeal 2019-08-29 10:59 評論0 收藏0
【譯】HTML表單高級樣式

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

Jacendfeng 2019-08-01 15:29 評論0 收藏0
form表單那點事兒(上) 基礎篇

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

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

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

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

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

jayzou 2019-08-01 17:50 評論0 收藏0