【CSS】input style

核取方塊

input(type="checkbox")

Display
這個框框只有對準,才能點進去

擴大核取範圍:外層包覆label

label
 input(type="checkbox")
 .box 只要點選框内任一處,都可以打勾上方框框
.box
 width: 200px
 height: 150px
 border: 1px solid #000

Display


 

點選後出效果

  1. 用HTML打一個input(type=”checkbox”)
  2. CSS打上input:checked
  3. 綜合上面label技巧,擴大選取範圍
  4. 找到要顯示特效的地方,寫進input:checked的兄弟元素或子元素裡面去
  5. 最後把核取方塊設成不顯示input { display: none }

範例

label
 input(type="checkbox")
 .box 
  h4 CLICK IT !!
.box
 background-color: #90a955
 width: 200px
 height: 150px
 display: flex
 justify-content: center
 align-items: center
 
h4
 color: #f2f2e9
 opacity: 0.2
 transition-duration: 0.5s
 
input:checked+.box
 & h4
  opacity: 1

input
 display: none

Display


 

Leave a Reply

Your email address will not be published. Required fields are marked *