html - Liferay 复选框/单选样式

Question

你好，我正在尝试设置 Liferay 复选框的样式，我无法编辑 HTML，所以我必须直接在 CSS 上工作，但我无法正确设置样式，特别是我在 :checked 选择器上发现了一个奇怪的行为.

这是 HTML:

<div class="checkbox">
    <label for="_com_liferay_dynamic_data_lists_form_web_portlet_DDLFormPortlet_INSTANCE_qaCfYGoELD8F_ddm$$CheckBoxTest$ViVemTVR$0$$de_DE">
        <input id="_com_liferay_dynamic_data_lists_form_web_portlet_DDLFormPortlet_INSTANCE_qaCfYGoELD8F_ddm$$CheckBoxTest$ViVemTVR$0$$de_DE" name="_com_liferay_dynamic_data_lists_form_web_portlet_DDLFormPortlet_INSTANCE_qaCfYGoELD8F_ddm$$CheckBoxTest$ViVemTVR$0$$de_DE" type="checkbox" value="true"> CheckBox Test
            <span class="icon-asterisk text-warning"></span>
    </label>
</div>

这是我的 CSS:

.checkbox input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  width: 12px;
  height: 12px;
  background-color: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #C6C6C6;
}

.checkbox:checked {
  background-color: blue;
  width: 12px;
  height: 12px;
  background-color: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #C6C6C6;
}

有什么变通方法可以解决这个问题吗？

Answer 1

我认为这个 css 可以解决你的问题

 .checkbox span {
     font-size: 19px;
     color: #898787;
     position: relative;
     cursor: pointer;
     padding-left: 30px;
     line-height: 33px;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
}
.checkbox span:before {
     content: "";
     background-color: #FFFFFF;
      border-radius: 3px;
      border: 1px solid #C6C6C6;
     display: inline-block;
     position: absolute;
     width: 34px;
     height: 32px;
     left: 0;
     margin-left: -16px;
     overflow: hidden;
}
 .checkbox input[type="checkbox"]:checked + span:before {
     background: blue;
     width: 34px;
     height: 32px;
}
.checkbox input[type="checkbox"]{
     width: 0;
 }