Question

您好我正在尝试设置Liferay复选框的样式，我无法编辑HTML因此我必须直接在CSS上工作但我无法正确设置它，特别是我发现了一个奇怪的行为：选中的选择器

这是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;
 }

Liferay CheckBox /收音机造型

1 个答案: