一燕雁、背景介紹
下拉列表由select標(biāo)簽實(shí)現(xiàn)，單選按鈕由表單元素input的type屬性radio定義鲸拥。以下分別是一個(gè)簡(jiǎn)單的下拉列表和單選按鈕拐格。
二、知識(shí)剖析
1刑赶、form元素
? ? ? ? ? form元素定義HTML表單,HTML表單是一個(gè)包含表單元素的區(qū)域捏浊。HTML表單包含表單元素。而表單元素指的是不同類(lèi)型的input元素撞叨、復(fù)選框金踪、單選按鈕、提交按鈕等等牵敷。input元素是最重要的表單元素胡岔。表單元素是允許用戶(hù)在表單中輸入內(nèi)容。input元素有很多形態(tài)劣领，有不同的type屬性姐军，而radio是其中一個(gè)屬性铁材，用于定義單選按鈕尖淘。
2、radio
? ? ? ? input元素在form元素中使用著觉，用來(lái)聲明允許用戶(hù)輸入數(shù)據(jù)的input控件村生。輸入類(lèi)型是由類(lèi)型屬性（type）定義的，輸入類(lèi)型至少包含23種饼丘，大多數(shù)經(jīng)常被用到的輸入類(lèi)型如下：text（文本輸入）趁桃、password（密碼輸入）、submit（提交按鈕）、button（按鈕）卫病、image（圖像作為提交按鈕）以及checkbox（復(fù)選框）和radio（單選按鈕）油啤。Radio對(duì)象代表HTML表單中的單選按鈕。在HTML表單中<input type="radio">每出現(xiàn)一次蟀苛，一個(gè)Radio對(duì)象就會(huì)被創(chuàng)建益咬。單選按鈕是表示一組互斥選項(xiàng)按鈕中的一個(gè)。當(dāng)一個(gè)按鈕被選中帜平，之前選中的按鈕就變?yōu)榉沁x中的幽告。
3、label
? ? ? ?label標(biāo)簽為input元素定義標(biāo)注（標(biāo)記）裆甩。label元素不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果冗锁。"for"屬性可把label綁到另外一個(gè)元素。只需把"for"屬性的值設(shè)置為相關(guān)元素的id屬性的值嗤栓。給raido和后面的文字外面加個(gè)label標(biāo)簽的冻河，這樣的話(huà)點(diǎn)文字就能選上radio,改善用戶(hù)體驗(yàn)。如果label標(biāo)簽包含一個(gè)input元素茉帅，那么點(diǎn)擊label標(biāo)簽內(nèi)容就可以選中input標(biāo)簽芋绸，改變r(jià)adio默認(rèn)樣式也是基于這個(gè)原理。
4担敌、select
? ? ? select標(biāo)簽用來(lái)創(chuàng)建下拉列表摔敛。select標(biāo)簽中的option標(biāo)簽定義了列表中的可用選項(xiàng)。select元素用來(lái)創(chuàng)建下拉列表,是一種表單控件全封，可用于在表單中接受用戶(hù)輸入,select元素通過(guò)option標(biāo)簽定義列表中的可用選項(xiàng)马昙，也就是下拉菜單選項(xiàng)。
三刹悴、常見(jiàn)問(wèn)題
如何修改radio和select的默認(rèn)樣式：
? ? ? ?下拉列表和單選按鈕,有原始的默認(rèn)樣式行楞，有時(shí)候?yàn)榱嗣烙^，這些樣式并不能達(dá)到我們的要求土匀。因此需要更改樣式子房，達(dá)到設(shè)計(jì)要求。一般的方法是使用css進(jìn)行清除覆蓋原有默認(rèn)樣式就轧，然后添加我們想要的樣式证杭。
1、修改select默認(rèn)樣式
使用appearance改變下拉列表的原有默認(rèn)屬性妒御，將原有默認(rèn)屬性清除解愤，在重新編寫(xiě)樣式。webkit-appearance屬性是一個(gè)可以改變按鈕和其他控件的外觀的屬性乎莉，使其類(lèi)似于原生控件送讲。-webkit-appearance是一個(gè) 不規(guī)范的屬性（unsupported WebKit property）奸笤，它沒(méi)有出現(xiàn)在CSS規(guī)范草案中。此屬性非標(biāo)準(zhǔn)且渲染效果在不同瀏覽器下不同哼鬓，有些屬性值不支持监右，所以使用時(shí)要慎用。所有主流瀏覽器都不支持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默認(rèn)樣式
修改radio 默認(rèn)樣式原理主要是使用label標(biāo)簽將input標(biāo)簽包裹味榛，里面再放一個(gè)inline-block標(biāo)簽。將input標(biāo)簽隱藏予跌，使用inline-block標(biāo)簽樣式代替input標(biāo)簽搏色。要使用到：checked 偽類(lèi)和：after 偽類(lèi)。
.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>蘋(píng)果
</lable>
<labelclass="test-label">
<inputclass="test-radio"type="radio"name="radio">
<span class="test-radioInput"></span>李子
</lable>
四券册、擴(kuò)展思考
1频轿、checkbox怎么修改默認(rèn)樣式？
參考文獻(xiàn)：
1烁焙、http://uplifted.net/programming/change-default-select-dropdown-style-just-css
2航邢、https://fatesinger.com/74438
