最近不太忙，多寫幾篇文章。很多時候我們用js來實現視覺效果，其實不用那么麻煩，掌握一些常用的css知識能讓你事半功倍，這篇文章講的是使用純css來實現一個列表項的選中效果，希望對你有所幫助
先上鏈接，點擊預覽https://codepen.io/Ritr/pen/Bgqemr
實現這個效果只需要簡單三步走：
0：寫一個簡單的列表，并且初始化css
html代碼
<p>你喜歡哪種水果</p><ul> <li> <label for="banana"> <input type="radio" id="banana" name="fruit"> <span>香蕉</span> </label> </li> <li> <label for="apple"> <input type="radio" id="apple" name="fruit"> <span>蘋果</span> </label> </li> <li> <label for="orange"> <input type="radio" id="orange" name="fruit"> <span>橘子</span> </label> </li></ul>
css代碼
ul,li{ list-style-type:none;}ul{ border:1px solid #000; padding:5px; width:200px;}li{ margin:2px; background:#ccc;}1：使用css選擇器，選擇目標。如果你想對某些元素添加某些視覺效果的時候，首先選中它，再寫一些特定的css以區別于其他元素
input:checked + span{ color:#F66; font-weight:bold; background:#ff0;}2：隱藏radio，radio默認是個小圈圈，我們先把它隱藏起來，實際上會通過label標簽的for屬性來實現對radio的選中
input[type="radio"]{ display:none;}3:優化樣式，這樣會騷微好看一點點
li label,li label span{ display:inline-block; width:100%;}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
