2. IT
    3. 单选多选框 美观UI

    单选多选框 美观UI

    xiaoxiao2021-04-17  42
    /* 单选/多选框 美观 */ input[type=checkbox], input[type=radio] { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin: 0; cursor: pointer; vertical-align: bottom; background: #fff; border: 1px solid #00b4ff; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; top:1px; } input[type=checkbox]:active, input[type=radio]:active { border-color: #00b4ff; background: #ebebeb; } input[type=checkbox]:hover { border-color: #00b4ff; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } input[type=radio] { border-radius: 50%; width: 15px; height: 15px; } input[type=checkbox]:checked, input[type=radio]:checked { background: #fff; } input[type=radio]:checked::after { content: ''; display: block; position: relative; top: 3px; left: 3px; width: 7px; height: 7px; background: #00b4ff; border-radius: 50%; } input[type=checkbox]:checked::after { content:""; display: block; position: absolute; top: -1px; left: -4px; width: 13px; height: 13px; } input[type=checkbox]:focus { outline: none; border-color: #4d90fe; } 
    转载请注明原文地址: https://ju.6miu.com/read-674179.html

    技术

    最新回复(0)