Question

我正在尝试使用FontAwesome获取CSS仅收音机和复选框按钮。我有jsfiddle here。

我正在使用以下CSS，当复选框具有包含内容的标签时，效果很好。我现在正试图在我的页面上的表格中创建一个复选框矩阵，图标显示正常但无法点击/更改状态。

我的CSS：

/**
 * Checkboxes
 */


input[type=checkbox] {
  display: none;
}


/* to hide the checkbox itself */

input[type=checkbox] + label:before {
  display: inline-block;
  letter-spacing: 5px;
  content: "\f0c8";
  font-family: 'Font Awesome 5 Pro';
}


/* unchecked icon */

input[type=checkbox]:checked + label:before {
  content: "\f14a";
  letter-spacing: 5px;
}


/**
 * Radio buttons
 */

input[type=radio] {
  display: none;
}


/* to hide the radio itself */

input[type=radio] + label:before {
  display: inline-block;
  letter-spacing: 5px;
  content: "\f111";
  font-family: 'Font Awesome 5 Pro';
}


/* unchecked icon */

input[type=radio]:checked + label:before {
  content: "\f192";
  letter-spacing: 5px;
}

input[type=checkbox] + label:hover,
input[type=radio] + label:hover {
  cursor: pointer;
}

我的HTML：

<div>
  <i class="fas fa-square"></i> SAMPLE UNCHECKED
  <br/>
  <i class="fas fa-check-square"></i> SAMPLE CHECKED
  <br/>
  <br/>
  <br/>
  <input name="access_chk[]" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
  <br/>
  <input name="access_chk[]" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
  <br/>
  <input name="access_chk[]" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
</div>

Answer 1

这是一个可能的解决方案：既然你的标签是空的，为什么要使用它们（除非你有一些隐藏的屏幕阅读器属性，你不需要空标签......）。

诀窍是使用复选框本身的伪元素而不是标签。要使复选框起作用，请对它们使用Authenticator.setDefault(object : Authenticator() { override fun getPasswordAuthentication(): PasswordAuthentication { return PasswordAuthentication("usernameinplaintext", "passwordinplaintext".toCharArray()) } }) var sentBytes: Long = 0 HttpsURLConnection.setDefaultHostnameVerifier(NullHostNameVerifier()) val context = SSLContext.getInstance("TLS") context.init(null, arrayOf<X509TrustManager>(NullX509TrustManager()), SecureRandom()) HttpsURLConnection.setDefaultSSLSocketFactory(context.socketFactory)，并对伪元素使用visbility:hidden。

小缺点：您必须稍微改变字体大小，其他范围内的字形可能显得太小。

＆＃13;

visibility:visible

＆＃13;

input[type=checkbox] {
  visibility:hidden;
}

input[type=checkbox]::before {
  visibility: visible;
  font-size:16px;
  display: inline-block;
  letter-spacing: 5px;
  content: "\f0c8";
  font-family: 'Font Awesome 5 Free';
}

input[type=checkbox]:checked::before {
  content: "\f14a";
  letter-spacing: 5px;
  font-family: 'Font Awesome 5 Free';
}

＆＃13;

Answer 2

请注意，for属性适用于目标元素的<{1}}属性而不是 id属性。

将您的标记更改为：

name

Demo

带有空标签的字体真棒CSS复选框

2 个答案: