SASS-单击时保持按钮颜色（焦点，活动）

只是我的Rails应用程序的一个样式问题

我做了一些单选按钮，看起来像普通的按钮。单击按钮（选中单选按钮）时，我希望保持按钮背景颜色与悬停颜色相同，但不知何故它不起作用。不幸的是，我不是最大的CSS专家。 红色仅用于测试目的

HTML:

<label class="btn custom-btn good-outline">
  <%= f.radio_button :reception_feed, 2 %>
  <%= image_tag "smiley_2.svg", size: '48x48' %>
</label>

.good-outline {
    border-color: #00e676;
    color: #00e676;
    &:hover {
        background-color: #00e676;
        color: white;
    }    
    input[type=radio]:checked + label {
        background-color: red;
    }
  }

.good-outline {
    border-color: #00e676;
    color: #00e676;
    &:hover {
        background-color: #00e676;
        color: white;
    }    
    &:active, &:focus {
        background-color: red;
    }
  }

<input type="radio" id="choice-first" name="radio-choice">
<label for="choice-first">This is my first choice</label>
<input type="radio" id="choice-second" name="radio-choice">
<label for="choice-second">This is my second choice</label>

CSS（第二次尝试）：

<label class="btn custom-btn good-outline">
  <%= f.radio_button :reception_feed, 2 %>
  <%= image_tag "smiley_2.svg", size: '48x48' %>
</label>

.good-outline {
    border-color: #00e676;
    color: #00e676;
    &:hover {
        background-color: #00e676;
        color: white;
    }    
    input[type=radio]:checked + label {
        background-color: red;
    }
  }

.good-outline {
    border-color: #00e676;
    color: #00e676;
    &:hover {
        background-color: #00e676;
        color: white;
    }    
    &:active, &:focus {
        background-color: red;
    }
  }

<input type="radio" id="choice-first" name="radio-choice">
<label for="choice-first">This is my first choice</label>
<input type="radio" id="choice-second" name="radio-choice">
<label for="choice-second">This is my second choice</label>

如果我在浏览器中指定状态，它就会工作。但它不适用于点击事件

---

提前谢谢

您可以通过稍微更改标记来完成此操作。
由于我不熟悉Rails，我将在代码段中使用基本HTML

首先，第一次尝试失败的原因。

您的HTML标记：

<label class="btn custom-btn good-outline">
  <%= f.radio_button :reception_feed, 2 %>
  <%= image_tag "smiley_2.svg", size: '48x48' %>
</label>

---

简而言之，

input[type=radio]：checked+label

不会以标记中的任何内容为目标

现在，让我们更改标记：

<label class="btn custom-btn good-outline">
  <%= f.radio_button :reception_feed, 2 %>
  <%= image_tag "smiley_2.svg", size: '48x48' %>
</label>

.good-outline {
    border-color: #00e676;
    color: #00e676;
    &:hover {
        background-color: #00e676;
        color: white;
    }    
    input[type=radio]:checked + label {
        background-color: red;
    }
  }

.good-outline {
    border-color: #00e676;
    color: #00e676;
    &:hover {
        background-color: #00e676;
        color: white;
    }    
    &:active, &:focus {
        background-color: red;
    }
  }

<input type="radio" id="choice-first" name="radio-choice">
<label for="choice-first">This is my first choice</label>
<input type="radio" id="choice-second" name="radio-choice">
<label for="choice-second">This is my second choice</label>

这是我的第一选择
这是我的第二个选择，不是CSS。这是SASS或更少的
input[type=radio]：checked+label
是一种方法，但如果它是一个label，它的目标是您输入的下一个同级项。。。而且它不是你在标记中拥有的东西。我们可以更改您的html标记吗？是的，我当然可以：）您需要一个父选择器才能使当前html标记正常工作，但遗憾的是，这还不存在。查看此线程以了解可能的解决方案：