純css實現(xiàn)選中切換效果

phodal 發(fā)布于2019-08-30 11:21 / 2433人閱讀

最近不太忙，多寫幾篇文章。很多時候我們用js來實現(xiàn)視覺效果，其實不用那么麻煩，掌握一些常用的css知識能讓你事半功倍，這篇文章講的是使用純css來實現(xiàn)一個列表項的選中效果，希望對你有所幫助

先上鏈接，點擊預(yù)覽https://codepen.io/Ritr/pen/B...

實現(xiàn)這個效果只需要簡單三步走：
0：寫一個簡單的列表，并且初始化css

html代碼

你喜歡哪種水果

香蕉
蘋果
橘子

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%;
}

操作雖然簡單，但也是我寫這么久css的總結(jié)，如果對你有所幫助希望你點個贊。謝謝

云服務(wù)器 GPU云服務(wù)器純CSS 點擊選中效果 html表格選中效果切換效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114937.html

相關(guān)文章

純CSS實現(xiàn)網(wǎng)站常用的五角星評分和分?jǐn)?shù)展示交互效果

摘要：技術(shù)我們使用一些特殊的選擇器，然后配合單選框以及復(fù)選框自帶的一些特性，可以實現(xiàn)元素的顯示隱藏效果。當(dāng)接口返回的分?jǐn)?shù)是分的時候，剛好占據(jù)一半的星星，星半，只要計算出百分比就行，只用管數(shù)據(jù)，用上數(shù)據(jù)驅(qū)動的特點來動態(tài)展示樣式這個簡直不要太容易。最近做的一個項目涉及到評分和展示分?jǐn)?shù)的模塊，UI設(shè)計師也給了幾個切好的圖片，實現(xiàn)五角星評分方式很多，本質(zhì)愛折騰的精神和對性能追求以及便于維護(hù)的考慮，...

Towers 2019-08-29 12:20 評論0 收藏0
純CSS實現(xiàn)網(wǎng)站常用的五角星評分和分?jǐn)?shù)展示交互效果

摘要：技術(shù)我們使用一些特殊的選擇器，然后配合單選框以及復(fù)選框自帶的一些特性，可以實現(xiàn)元素的顯示隱藏效果。當(dāng)接口返回的分?jǐn)?shù)是分的時候，剛好占據(jù)一半的星星，星半，只要計算出百分比就行，只用管數(shù)據(jù)，用上數(shù)據(jù)驅(qū)動的特點來動態(tài)展示樣式這個簡直不要太容易。最近做的一個項目涉及到評分和展示分?jǐn)?shù)的模塊，UI設(shè)計師也給了幾個切好的圖片，實現(xiàn)五角星評分方式很多，本質(zhì)愛折騰的精神和對性能追求以及便于維護(hù)的考慮，...

wyk1184 2019-08-20 15:31 評論0 收藏0
純CSS實現(xiàn)網(wǎng)站常用的五角星評分和分?jǐn)?shù)展示交互效果

摘要：技術(shù)我們使用一些特殊的選擇器，然后配合單選框以及復(fù)選框自帶的一些特性，可以實現(xiàn)元素的顯示隱藏效果。當(dāng)接口返回的分?jǐn)?shù)是分的時候，剛好占據(jù)一半的星星，星半，只要計算出百分比就行，只用管數(shù)據(jù)，用上數(shù)據(jù)驅(qū)動的特點來動態(tài)展示樣式這個簡直不要太容易。最近做的一個項目涉及到評分和展示分?jǐn)?shù)的模塊，UI設(shè)計師也給了幾個切好的圖片，實現(xiàn)五角星評分方式很多，本質(zhì)愛折騰的精神和對性能追求以及便于維護(hù)的考慮，...

Tony_Zby 2019-08-01 16:35 評論0 收藏0
純CSS+HTML自定義checkbox效果

摘要：應(yīng)該是一個比較常用的功能了，不過瀏覽器自帶的往往樣式不怎么好看，而且不同瀏覽器效果也不一樣。出于美化和統(tǒng)一視覺效果的需求，的自定義就被提出來了。個人建議用的和偽元素和是一個東西。 checkbox應(yīng)該是一個比較常用的html功能了，不過瀏覽器自帶的checkbox往往樣式不怎么好看，而且不同瀏覽器效果也不一樣。出于美化和統(tǒng)一視覺效果的需求，checkbox的自定義就被提出來了。這里對實...

sevi_stuo 2019-08-28 18:15 評論0 收藏0
CSS效果篇--純CSS+HTML實現(xiàn)checkbox的思路與實例

摘要：出于美化和統(tǒng)一視覺效果的需求，的自定義就被提出來了。這里對實現(xiàn)方法做個總結(jié)。實現(xiàn)思路純實現(xiàn)的主要手段是利用標(biāo)簽的模擬功能。個人建議用的和偽元素和是一個東西。向擁有鍵盤輸入焦點的元素添加樣式。向已被訪問的鏈接添加樣式。 checkbox應(yīng)該是一個比較常用的html功能了，不過瀏覽器自帶的checkbox往往樣式不怎么好看，而且不同瀏覽器效果也不一樣。出于美化和統(tǒng)一視覺效果的需求，chec...

qingshanli1988 2019-08-01 18:22 評論0 收藏0