代码拉取完成,页面将自动刷新
?> 背景知识: transition, transform
<script v-pre type="text/x-template" id="custom-radio"> <style> main { width: 100%; padding: 60px 0; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; user-select: none; font: 14px / 1 Helvetica, sans-serif; } input[type="radio"]{ position: absolute; clip: rect(0, 0, 0, 0); } input[type="radio"] + label{ display: inline-block; height: 12px; line-height: 12px; /* 小写英文开头 */ /* line-height: 10px; */ cursor: pointer; position: relative; user-select: none; } input[type="radio"] + label:not(:nth-of-type(6)){ margin-top: 29px; margin-bottom: 29px; } input[type="radio"]:disabled + label{ cursor: not-allowed; color: #999; } input[type="radio"] + label::before{ content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 8px; vertical-align: top; margin-right: .2em; border: 1px solid #ccc; background-color: #fff; transition: border-color .2s ease-in-out, background-color .2s ease-in-out; } input[type="radio"]:not(:disabled) + label:hover::before{ border-color: #b4a078; } input[type="radio"]:checked + label::before{ border-color: #b4a078 !important; background-color: #b4a078; } input[type="radio"] + label::after{ content: ""; display: inline-block; width: 4px; height: 4px; background-color: #fff; border-radius: 4px; position: absolute; left: 4px; top: 50%; transform: translateY(-50%) scale(0); transition: transform .2s ease-in-out; } input[type="radio"]:checked + label::after{ transform: translateY(-50%) scale(1); transition: transform .2s ease-in-out; } input[type="radio"]:disabled + label::before, input[type="radio"]:disabled.checked + label::before{ background-color: #f2f2f2; } input[type="radio"]:disabled.checked + label::after{ border-color: #ccc; background-color: #ccc; transform: translateY(-50%) scale(1); } </style> Vue React Angular 禁用 选中禁用 <script> </script> </script>创造良好的用户体验应当养成一种习惯~
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。