一、背景介紹
下拉列表由select標簽實現(xiàn)，單選按鈕由表單元素input的type屬性radio定義。以下分別是一個簡單的下拉列表和單選按鈕。
二、知識剖析
1、form元素
? ? ? ? ? form元素定義HTML表單,HTML表單是一個包含表單元素的區(qū)域。HTML表單包含表單元素。而表單元素指的是不同類型的input元素、復選框、單選按鈕、提交按鈕等等。input元素是最重要的表單元素。表單元素是允許用戶在表單中輸入內(nèi)容。input元素有很多形態(tài)，有不同的type屬性，而radio是其中一個屬性，用于定義單選按鈕。
2、radio
? ? ? ? input元素在form元素中使用，用來聲明允許用戶輸入數(shù)據(jù)的input控件。輸入類型是由類型屬性（type）定義的，輸入類型至少包含23種，大多數(shù)經(jīng)常被用到的輸入類型如下：text（文本輸入）、password（密碼輸入）、submit（提交按鈕）、button（按鈕）、image（圖像作為提交按鈕）以及checkbox（復選框）和radio（單選按鈕）。Radio對象代表HTML表單中的單選按鈕。在HTML表單中<input type="radio">每出現(xiàn)一次，一個Radio對象就會被創(chuàng)建。單選按鈕是表示一組互斥選項按鈕中的一個。當一個按鈕被選中，之前選中的按鈕就變?yōu)榉沁x中的。
3、label
? ? ? ?label標簽為input元素定義標注（標記）。label元素不會向用戶呈現(xiàn)任何特殊效果。"for"屬性可把label綁到另外一個元素。只需把"for"屬性的值設置為相關元素的id屬性的值。給raido和后面的文字外面加個label標簽的，這樣的話點文字就能選上radio,改善用戶體驗。如果label標簽包含一個input元素，那么點擊label標簽內(nèi)容就可以選中input標簽，改變radio默認樣式也是基于這個原理。
4、select
? ? ? select標簽用來創(chuàng)建下拉列表。select標簽中的option標簽定義了列表中的可用選項。select元素用來創(chuàng)建下拉列表,是一種表單控件，可用于在表單中接受用戶輸入,select元素通過option標簽定義列表中的可用選項，也就是下拉菜單選項。
三、常見問題
如何修改radio和select的默認樣式：
? ? ? ?下拉列表和單選按鈕,有原始的默認樣式，有時候為了美觀，這些樣式并不能達到我們的要求。因此需要更改樣式，達到設計要求。一般的方法是使用css進行清除覆蓋原有默認樣式，然后添加我們想要的樣式。
1、修改select默認樣式
使用appearance改變下拉列表的原有默認屬性，將原有默認屬性清除，在重新編寫樣式。webkit-appearance屬性是一個可以改變按鈕和其他控件的外觀的屬性，使其類似于原生控件。-webkit-appearance是一個 不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在CSS規(guī)范草案中。此屬性非標準且渲染效果在不同瀏覽器下不同，有些屬性值不支持，所以使用時要慎用。所有主流瀏覽器都不支持appearance屬性。Firefox支持替代的-moz-appearance屬性。Safari和Chrome支持替代的-webkit-appearance屬性。
select{
-moz-appearance:none;-webkit-appearance:none;border:none;margin:20px;width:100px;height:30px;padding-left:10px;padding-right:25px;color:white;background:url("../img/css-10-radio-select/rose.png")no-repeat75px#3b3b3b;
}
<input>
<option value="hello girl">hello girl</option>
</imput>
2、修改radio默認樣式
修改radio 默認樣式原理主要是使用label標簽將input標簽包裹，里面再放一個inline-block標簽。將input標簽隱藏，使用inline-block標簽樣式代替input標簽。要使用到：checked 偽類和：after 偽類。
.test-label{margin:20px20px0 0;display:inline-block}
.test-radio{display:none}
.test-radioInput{background-color:#fff;border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top: -1px;vertical-align:middle;width:16px;line-height:1}
.test-radio:checked+ .test-radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}
<labelclass="test-label">
<inputclass="test-radio"type="radio"name="radio">
<spanclass="test-radioInput"></span>蘋果
</lable>
<labelclass="test-label">
<inputclass="test-radio"type="radio"name="radio">
<span class="test-radioInput"></span>李子
</lable>
四、擴展思考
1、checkbox怎么修改默認樣式？
參考文獻：
1、http://uplifted.net/programming/change-default-select-dropdown-style-just-css
2、https://fatesinger.com/74438
