}input[type="checkbox"]:focus{border:0; } 第三种 input[type="radio"] + label::before{content:"\a0";display:inline-block;vertical-align:middle;box-sizing:border-box;width:14px;height:14px;border-radius:50%;text-indent:1px;margin-bottom:2px;margin-right:2px;border:1px solid #bfbfbf;...
.form-control--disabled { color: var(--form-control-disabled); cursor: not-allowed; } input[type=checkbox] { /* Add if not using autoprefixer */ -webkit-appearance: none; /* Remove most all native input styles */ -moz-appearance: none; appearance: none; /* For iOS < 15 */ back...
Check 首先勾勒出开关的形状,一个圆角矩形中间放一个圆形按钮: input[type="checkbox"]:checked+label,input[type="checkbox"]:not(:checked) +label{background-color:#e0e0e0;border-radius:24px;cursor: pointer;display: inline-block;height:24px;position: relative;text-indent: -9999px;width:48px; }i...
4.2.1、:enabled 匹配每个已启用元素(所有表单控件) 4.2.2、:disabled 匹配每个被禁用元素(所有表单控件) 4.2.3、:checked 匹配每个已被选中的input元素(适用radio和checkbox) 4.3、结构伪类:从标记的层次结构来匹配元素 4.3.1、:first-child 匹配属于父元素中的首个子元素 4.3.2、:last-child 匹配属于其父元素...
{box-shadow:0003px #7c9473;}/* :disabled 禁用状态 */input[type="radio"]:disabled{box-shadow:0003px #cfdac8;cursor:not-allowed;}/* :checked radio 或 checkbox 表单被勾选状态 *//* 注意书写顺序,选择元素相同时 :checked 应写在 :enabled/:disabled 后面 */input[type="radio"]:checked{box...
disabled 后面 */input[type="radio"]:checked{box-shadow:0003px#c0e218;}/* :default 表示一组相关元素中的默认(选中)表单元素 此处 :default 应用于默认设置了 checked 的 radio 表单上 *//* 该选择器可以在 , , , 以及 上使用 */input[type="radio"]:default{box-shadow:0003px#86aba1;}/* ...
:checked input[type="checkbox"、type="radio"]、 switch 表示checked属性为true的元素(不支持动画样式的设置)。 伪类示例如下,设置按钮的:active伪类可以控制被用户按下时的样式: 收起 深色代码主题 复制 <!-- index.hml --> 收起 深色代码主题 复制 /* index.css */ .button:active { background...
单选项checked + disabled 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. /* 单复选框 */ [type="radio"], [type="checkbox"] { position:absolute; width:20px;height:20px; opacity:0; cursor:pointer; } /* 单选框 */ ....
input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]) 1. 也可以在:not()中包含其他伪类选择器,例如排除:disabled状态的按钮: 复制 button:not(:disabled); 1. 八、伪元素选择器 伪元素是一个附加至选择器末的关键词,允许对被选择元素的特定部分修改样式。它们在应用中差异很大,目前...
禁用: 可用按钮 不可用按钮 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. :check 选择器用于修改选中表单元素(单选、多选、下拉...