? ? ? ?大家好侦铜，我是IT修真院北京分院第23期的學(xué)員郭婷婷专甩，一枚正直純潔善良的WEB前端程序員。
? ? ? ?今天給大家分享一下钉稍，如何改變默認(rèn)radio和select的樣式配深？
? ? ? ?分享人：郭婷婷
1.背景介紹
單選按鈕 && 下拉列表
以上兩種展示數(shù)據(jù)的方式分別由表單元素中的select標(biāo)簽和input標(biāo)簽實(shí)現(xiàn)，
其中input元素使用的是radio類型嫁盲。
2.知識剖析
一篓叶、form元素
? ? ? ? form元素定義 HTML 表單,HTML 表單是一個包含表單元素的區(qū)域烈掠。
? ? ? ? 表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本輸入、下拉列表缸托、單選按鈕左敌、復(fù)選框等等。多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽input俐镐。
二矫限、radio
? ? ? ?先介紹一下input元素，input元素是最重要的表單元素佩抹。
? ? ? ?input元素在 form元素中使用叼风，用來聲明允許用戶輸入數(shù)據(jù)的 input 控件。
? ? ? ?輸入類型是由類型屬性（type）定義的棍苹，輸入類型至少包含23種无宿，大多數(shù)經(jīng)常被用到的輸入類型如下：
? ? ? ?text（文本輸入）、password（密碼輸入）枢里、submit（提交按鈕）孽鸡、button（按鈕）、image（圖像作為提交按鈕）以及checkbox（復(fù)選框）和今天的重點(diǎn)radio（單選按鈕）栏豺。
三彬碱、label
label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。label 元素不會向用戶呈現(xiàn)任何特殊效果奥洼。
"for" 屬性可把 label 綁定到另外一個元素巷疼。只需把 "for" 屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。
四灵奖、select
select標(biāo)簽用來創(chuàng)建下拉列表嚼沿。select標(biāo)簽中的 option 標(biāo)簽定義了列表中的可用選項(xiàng)。
3.常見問題
如何修改radio和select的默認(rèn)樣式
4 解決方案
4.1 修改radio默認(rèn)樣式
需要用到的工具如下：
label標(biāo)簽桑寨；
:checked 選擇器,匹配每個已被選中的 input 元素（只用于單選按鈕和復(fù)選框）伏尼。
兄弟選擇器：
1忿檩、+ 選擇器（相鄰兄弟選擇器）尉尾，可選擇緊接在另一元素后的元素，且二者有相同父元素燥透。
2沙咏、~ 選擇器，作用是查找某一個指定元素的后面的所有兄弟結(jié)點(diǎn)班套。
4.2 修改select默認(rèn)樣式
appearance 屬性肢藐，可以讓元素看上去像標(biāo)準(zhǔn)的用戶界面元素。
所有主流瀏覽器都不支持 appearance 屬性吱韭。
Firefox 支持替代的 -moz-appearance 屬性吆豹。
Safari 和 Chrome 支持替代的 -webkit-appearance 屬性鱼的。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
偽類和偽元素的區(qū)別
1. 偽類與偽元素
CSS introduces the concepts of pseudo-elements and pseudo-classes? to permit formatting based on information that lies outside the document tree.
直譯過來就是：css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。
也就是說痘煤，偽類和偽元素是用來修飾不在文檔樹中的部分凑阶，比如，一句話中的第一個字母衷快，或者是列表中的第一個元素宙橱。
下面分別對偽類和偽元素進(jìn)行解釋：
偽類用于當(dāng)已有元素處于的某個狀態(tài)時，為其添加對應(yīng)的樣式蘸拔，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的师郑。比如說，當(dāng)用戶懸停在指定的元素時调窍，我們可以通過:hover來描述這個元素的狀態(tài)宝冕。
雖然它和普通的css類相似，可以為已有的元素添加樣式陨晶，但是它只有處于dom樹無法描述的狀態(tài)下才能為元素添加樣式猬仁，所以將其稱為偽類。
偽元素用于創(chuàng)建一些不在文檔樹中的元素先誉，并為其添加樣式湿刽。比如說，我們可以通過:before來在一個元素前增加一些文本褐耳，并為這些文本添加樣式诈闺。
雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹中铃芦。
2. 偽類與偽元素的區(qū)別
如果不用添加類的方法雅镊，可以通過給設(shè)置第一個li的:first-child偽類來為其添加樣式。這個時候刃滓，被修飾的li元素依然處于文檔樹中仁烹。
如果不創(chuàng)建一個span元素，我們可以通過設(shè)置p的:first-letter偽元素來為其添加樣式咧虎。
這個時候卓缰，看起來好像是創(chuàng)建了一個虛擬的元素并添加了樣式，但實(shí)際上文檔樹中并不存在這個元素砰诵。
從上述例子中可以看出征唬，偽類的操作對象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個文檔數(shù)外的元素茁彭。因此总寒，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個文檔樹之外的元素。
7.參考文獻(xiàn)
參考1：W3school
參考2：總結(jié)偽類與偽元素
8 更多討論
（1）偽元素后面單冒號和雙冒號的區(qū)別理肺？
? ? ? ? CSS3規(guī)范中的要求使用雙冒號(::)表示偽元素摄闸，以此來區(qū)分偽元素和偽類善镰，比如::before和::after等偽元素使用雙冒號(::)，:hover和:active等偽類使用單冒號(:)年枕。除了一些低于IE8版本的瀏覽器外媳禁，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法。然而画切，除了少部分偽元素竣稽，如::backdrop必須使用雙冒號，大部分偽元素都支持單冒號和雙冒號的寫法霍弹，比如::after毫别，寫成:after也可以正確運(yùn)行。雖然CSS3標(biāo)準(zhǔn)要求偽元素使用雙冒號的寫法典格，但也依然支持單冒號的寫法岛宦。
（2）偽類的使用方法
偽類的語法：
selector:pseudo-class {property:value;}
CSS類也可以使用偽類：
selector.class:pseudo-class {property:value;}
（3）偽類的注意事項(xiàng)
偽類就像真正的類一樣，可以疊加使用耍缴，沒有數(shù)量上限砾肺，只要不是互斥的，比如這樣：
em:first-child:hover {color: red;}
這是完全可以的防嗡。但注意变汪，這里是“與”的關(guān)系。也就是說既要滿足“first-child”第一個子元素蚁趁，又要滿足“hover”光標(biāo)懸浮裙盾。
鳴謝
感謝大家觀看
BY :郭婷婷
PPT鏈接：https://ptteng.github.io/PPT/PPT/css-10-radio-select.html#/
視頻鏈接:https://v.qq.com/x/page/x051945u00y.html
--------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始他嫡，找個師兄番官，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏钢属，學(xué)習(xí)的路上不再迷门侨郏”。
這里是技能樹.IT修真院淆党，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線酷师，學(xué)習(xí)透明化，成長可見化宁否，師兄1對1免費(fèi)指導(dǎo)窒升∽罕椋快來與我一起學(xué)習(xí)吧?慕匠！
