關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

如何用CSS自定義checkbox以及radio按鈕樣式

目前有很多客製化form element的套件,
但是這次專案只需要客製checkbox及radio,
由於這樣的類子很常用到,就直接在這裡就做個紀錄,方便之後查詢
如何透過CSS來客製化HTML checlbox 及radio buttons

一、下載checks.png

首先,下載checks.png
下載後,請將圖片重新命名為checks.png

二、建立checkbox 及radio HTML區塊

<!--checkbox-->
<div>
  <input id="option" type="checkbox" name="field" value="option">
  <label for="option">同意</label>
</div>
<!--radio-->
<div>
    <input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"></label>
</div>
<div>
    <input id="radio2" type="radio" name="radio" value="2" checked="checked"><label for="radio2"></label>
</div>

三、置入checkbox 及 radio CSS

要留意,這裡預設是將圖片放在 images/checks.png

<style>
input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}
input[type=checkbox]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  line-height  : 24px;
  background   : url('images/checks.png') no-repeat 0 -48px;
}

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -73px;
}

input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -24px;
  padding-left : 28px;
  line-height  : 24px;
  background   : url('images/checks.png') no-repeat 0 3px;
}
input[type=radio]:not(old):checked + label{
  background-position : 0 -22px;
}
</style>

如果你喜歡我們的文章內容,請在這裡按個讚



checkbox radio css

最新文章推薦