Shulou(Shulou.com)06/01 Report--

This article mainly introduces css how to draw checkbox,radio, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Check box effect form {border: 1px solid # ccc;padding: 20pxposition width: 300pxposition margin: 30px auto;} .wrapper {margin-bottom: 10px;} .box {display: inline-block;position: relative;width: 20pxposition height: 20pxscape border: 2px solid orange;} .box input {position: absolute;top: 0left: 0position top:-3pxscape width: left-4pxscape width: 21pxscape height: 21px; opacity: 0cursor: pointer Box span: z-index: 5;} .box span {position: absolute;top: 1px; right: 6pxscape webkit-transform: rotate weight: bold;font-family: Arial;-webkit-transform: rotate (18deg);-moz-transform: rotate (18deg);-ms-transform: rotate (18deg);-o-transform: rotate (18deg); transform: rotate (18deg); color: orange;} input [type= "checkbox"] + span {opacity: 0 } input [type= "checkbox"]: checked+span {opacity: 1 } √ I am selected √ I am unselected thank you for reading this article carefully. I hope the article "how to draw checkbox,radio in css" shared by the editor will be helpful to you. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.