自定義按鈕樣式

fuyi501 發布于2019-08-29 15:16 / 1209人閱讀

摘要：在一些網站上經常可以看到改造過的按鈕選項比如這樣由于之前一直在端企業，樣式差不多就了所以也沒去研究。

在一些網站上經常可以看到改造過的按鈕選項比如這樣

由于之前一直在B端企業，樣式差不多就Ok了所以也沒去研究。昨天刷百度前端學院的時候遇到一個題就是改造checkbox radio樣式的，大概研究一番

最常見的自定義按鈕樣式，其實是用label模擬的,關于label可以在mdn進行查閱

label的for與表單的id對應，點擊click對應的表單被激活
click

通過上面的例子知道了，只要label的for屬性和表單的id對應，那么點擊label就等于點擊表單
這樣我們可以通過把原本的input隱藏掉，改造label的樣式就好了，來個最簡單的實現

css
label {width: 16px;height: 16px;border:1px solid #d9d9d9;display:flex}
input {display: none}
.demo:checked+label {border: 1px solid red; font-weight: 700;}
.demo:checked+label::after {margin: auto;content: "";color: red;width: 8px;height: 8px;line-height: 8px;text-align: center;font-size: 12px;border-radius: 50%;background: red;}

html

云服務器 GPU云服務器自定義按鈕樣式自定義按鈕 h5視頻播放器可自定義樣式按鈕樣式html

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

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

為你的網頁添加深色模式

摘要：最近推出了新版的，并希望能夠在瀏覽器中檢測到新加入的深色模式。能夠對頁面容器上的邊框陰影進行更新，使其在使用深色模式時不太透明。利用使用為按鈕創建不同的樣式和交互我們可以利用為深色和淺色主題的按鈕創建不同的樣式和懸停交互。翻譯：瘋狂的技術宅原文：https://www.creativebloq.com/... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你...

gaosboy 2019-08-30 15:43 評論0 收藏0
css scrollbar樣式設置

摘要：表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。一前言在CSS 中，如果我們在塊級容器上設置了屬性: overflow:scroll /* x y 方向都會*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當塊級內容區域...

104828720 2019-08-01 18:23 評論0 收藏0
css scrollbar樣式設置

摘要：表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。一前言在CSS 中，如果我們在塊級容器上設置了屬性: overflow:scroll /* x y 方向都會*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當塊級內容區域...

張春雷 2019-08-29 14:13 評論0 收藏0