純css實現(xiàn)選中切換效果的示例
發(fā)布時間：2019-07-09 15:06:28 作者：小王子 
我要評論
我要評論這篇文章主要介紹了純css實現(xiàn)選中切換效果的示例的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
最近不太忙，多寫幾篇文章。很多時候我們用js來實現(xiàn)視覺效果，其實不用那么麻煩，掌握一些常用的css知識能讓你事半功倍，這篇文章講的是使用純css來實現(xiàn)一個列表項的選中效果，希望對你有所幫助
先上鏈接，點擊預(yù)覽https://codepen.io/Ritr/pen/Bgqemr
實現(xiàn)這個效果只需要簡單三步走：
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選擇器，選擇目標(biāo)。如果你想對某些元素添加某些視覺效果的時候，首先選中它，再寫一些特定的css以區(qū)別于其他元素
input:checked + span{
color:#F66;
font-weight:bold;
background:#ff0;
}
2：隱藏radio，radio默認(rèn)是個小圈圈，我們先把它隱藏起來，實際上會通過label標(biāo)簽的for屬性來實現(xiàn)對radio的選中
input[type="radio"]{
display:none;
}
3:優(yōu)化樣式，這樣會騷微好看一點點
li label,
li label span{
display:inline-block;
width:100%;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS中引用svg圖片支持動態(tài)切換顏色的實現(xiàn)代碼
這篇文章主要介紹了CSS中引用svg圖片支持動態(tài)切換顏色的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考2020-07-15
這篇文章主要介紹了基于Css Variable的主題切換完美解決方案，本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參2020-06-18
這篇文章主要介紹了詳解如何簡單實現(xiàn)CSS主題的切換，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-06-15
這兩個概念是來源于 macOS系統(tǒng) ，該系統(tǒng)為用戶提供兩個主題皮膚，即 高亮 和 暗色 系的皮膚。接下來通過本文給大家分享使用CSS實現(xiàn)黑暗模式和高亮模式的切換功能，感興趣的2019-06-14
純CSS免費讓網(wǎng)站擁有暗黑模式切換功能的實現(xiàn)代碼
這篇文章主要介紹了純CSS免費讓網(wǎng)站擁有暗黑模式切換功能的實現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-22
