Question

我有一个自定义单选按钮，使用Font Awesome中的一些单选按钮图标。我在.radio-spacer上有一个悬停状态，它包含单选按钮。单选按钮可以基于某些先前的选择处于禁用状态。

我的问题是我禁用单选按钮时没有悬停状态。但是，我的悬停样式存在于包装器而不是按钮本身，并且不反映按钮是否被禁用。我不能使用，例如，.radio-spacer:disabled，因为它只是包裹按钮的div并且没有禁用状态。有什么想法吗？

＆＃13;

.radio-spacer {
  float: left;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  width: 103px;
}

.radio-spacer label {
  margin-bottom: 0;
}

.radio-spacer:hover {
  background-color: lightblue;
}

.radio-spacer:hover span {
  color: #fff;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]~span {
  cursor: pointer;
}

input[type="radio"]:disabled~span {
  cursor: not-allowed;
  color: #aeaeae !important;
  opacity: .65;
}

input[type="radio"]+.fa-dot-circle-o:before {
  content: "\f10c";
}

input[type="radio"]:checked+.fa-dot-circle-o:before {
  content: "\f192";
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="radio-spacer">
  <label>
        <input type="radio" class="hide select-plan" name="select-plan" />
        <span class="fa fa-fw fa-dot-circle-o"></span><span class="radio-label">Select</span>
    </label>
</div>
<div class="radio-spacer">
  <label>
        <input type="radio" class="hide select-plan" name="select-plan" disabled />
        <span class="fa fa-fw fa-dot-circle-o"></span><span class="radio-label">Disabled</span>
    </label>
</div>

＆＃13;

Answer 1

您可以使用空:after元素制作悬停样式，并将其放在radio / checkbox后面或使用.radio-spacer { display: inline-block; vertical-align: top; padding: 4px 8px; position: relative; } .select-plan:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } .select-plan:disabled ~ .radio-label { color: silver; cursor: not-allowed; } .select-plan:not([disabled]):hover:after { background: lightblue; }伪元素，如下所示。否则你将需要javascripts来检查收音机/复选框状态，并在容器中添加一个类然后设置样式。

＆＃13;

<div class="radio-spacer">
  <label>
    <input type="radio" class="hide select-plan" name="select-plan" />
    <span class="radio-label">Select</span>
  </label>
</div>
<div class="radio-spacer">
  <label>
    <input type="radio" class="hide select-plan" name="select-plan" disabled />
    <span class="radio-label">Disabled</span>
  </label>
</div>

＆＃13;

Selection.PasteSpecial Paste:=xlPasteValues

＆＃13;

删除已禁用的自定义单选按钮的悬停状态

1 个答案: