純css實現選中切換效果

phodal 發布于2019-08-30 11:21 / 2419人閱讀

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

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

實現這個效果只需要簡單三步走：
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選擇器，選擇目標。如果你想對某些元素添加某些視覺效果的時候，首先選中它，再寫一些特定的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%;
}

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114937.html

純CSS實現網站常用的五角星評分和分數展示交互效果

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

Towers 2019-08-29 12:20 評論0 收藏0
純CSS實現網站常用的五角星評分和分數展示交互效果

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

wyk1184 2019-08-20 15:31 評論0 收藏0
純CSS實現網站常用的五角星評分和分數展示交互效果

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

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

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

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

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

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