CSS3復選框樣式可以使網頁更加美觀和易于操作。在HTML中,復選框是通過input元素中的type屬性設置為"checkbox"來創建的。下面是一些常見的CSS3復選框樣式。
/*1.基本復選框*/ input[type="checkbox"] { -webkit-appearance: none; /*禁用默認外觀*/ --size: 20px; /*定義復選框大小*/ width: var(--size); height: var(--size); border-radius: 4px; /*添加圓角邊框*/ background-color: #fff; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), /*添加陰影效果*/ inset 0 0 0 2px #fff; } input[type="checkbox"]:checked { background-color: #0F9CDA; /*選中時改變背景顏色*/ box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px #fff; /*保留陰影*/ }
以上代碼創建了一種基本復選框樣式,使用了自定義大小和陰影效果,并且選中時背景顏色會變化。
/*2.帶標簽的復選框*/ label.checkbox { display: flex; /*使用彈性盒子實現布局*/ align-items: center; cursor: pointer; } label.checkbox span { margin-left: 10px; /*加入標簽間距*/ } input[type="checkbox"] + label.checkbox::before { content: ""; /*添加復選框*/ display: inline-block; width: 18px; height: 18px; border-radius: 4px; background-color: #fff; border: 2px solid #000; margin-right: 10px; } input[type="checkbox"]:checked + label.checkbox::before { background-color: #0F9CDA; /*選中時改變顏色*/ border-color: #0F9CDA; }
以上代碼創建了一種帶標簽的復選框樣式,使用label元素將復選框和標簽作為一組,使用before偽元素添加復選框,選中時復選框和標簽的顏色會改變。
總結:CSS3復選框樣式可以讓網頁變得更加美觀和易于操作,在實際使用中可以根據需要進行定制化設計。上一篇css3 多屏動畫
下一篇css3 塊元素底部對齊