技術標籤：CSS3css

做一個小專案，不想用第三方外掛。自己手寫美化一個單選框，下面說下思路。

1.把預設顯示的設定為隱藏

2.利用CSS：after屬性自定義想顯示成的樣子

下面把程式碼發出來

input[type=radio]{
    visibility: hidden;display: inline-block; margin-right: .2rem;
}
input[type=radio]:checked::after{
	background-image: url('../img/choujiang/rputon.png');
	background-repeat: no-repeat;
	background-size: contain;
	visibility: visible;
}
input[type=radio]::after{
	content: ' ';
	display: block;
	height: .32rem;
	width: .32rem;
	background-image: url('../img/choujiang/rput.png');
	background-repeat: no-repeat;
	background-size: cover;
	visibility: visible;
}
 

最終的顯示效果就是這個樣子，SOEASY!