HTML,CSS复选框标签位置应位于复选框的顶部

Question

美好的一天,我不擅长CSS,我很难将复选框标签放在复选框本身的顶部.你能帮我么？我希望它的标签也是中心格式的文本,因为我还想使用jquery动态更改文本.如果我选中它,"修复"文本将变为"固定",此文本应保持在复选框顶部的居中位置.这是我的JSFIDDLE >>> https://jsfiddle.net/koykoys/d2cb96xo/.

**注意:请不要修改"html"部分,只修改"css"部分.

谢谢.

input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label{
  position: relative;
  padding-left: 50px;
  cursor: pointer;
}


/* checkbox aspect */
input[type="checkbox"]:not(:checked) + label:before,
input[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 40px; height: 40px;
  background: #f8f8f8;
  border-radius: 3px;
  border: 2px solid #aaa;
  -webkit-box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5);
  box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5);
}
/* checked mark aspect */
input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
  content: '?';
  position: absolute;
  top: 0; left: 5px;
  font-size: 34px;
  color: green;
  transition: all .2s;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
}
/* checked mark aspect changes */
input[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
input[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

<div class="col-md-12">
   <input id="checkid"  type="checkbox">
   <label for="checkid">Fixed</label>
</div>

Answer 1

这将使标签在“复选框”上方居中（实际上不再是一个，input type="checkbox"因为您在标签上使用伪元素来直观地替换它）。

\n\n

\r\n

\r\n

input[type="checkbox"]:not(:checked),\r\ninput[type="checkbox"]:checked {\r\n  position: absolute;\r\n  left: -9999px;\r\n}\r\ninput[type="checkbox"]:not(:checked) + label,\r\ninput[type="checkbox"]:checked + label{\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: inline-block;\r\n  padding-bottom: 50px;\r\n}\r\n\r\n\r\n/* checkbox aspect */\r\ninput[type="checkbox"]:not(:checked) + label:before,\r\ninput[type="checkbox"]:checked + label:before {\r\n  content: \'\';\r\n  position: absolute;\r\n  left:50%; top: 20px;\r\n  width: 40px; height: 40px;\r\n  background: #f8f8f8;\r\n  border-radius: 3px;\r\n  border: 2px solid #aaa;\r\n  -webkit-box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5);\r\n  box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5);\r\n  transform: translateX(-50%);\r\n}\r\n/* checked mark aspect */\r\ninput[type="checkbox"]:not(:checked) + label:after,\r\ninput[type="checkbox"]:checked + label:after {\r\n  content: \'\xe2\x9c\x94\';\r\n  position: absolute;\r\n  top: 20px; left: 0;\r\n  right: 0;\r\n  font-size: 34px;\r\n  color: green;\r\n  transition: all .2s;\r\n  -webkit-transition: all .2s;\r\n  -moz-transition: all .2s;\r\n  -ms-transition: all .2s;\r\n  -o-transition: all .2s;\r\n  text-align: center;\r\n}\r\n/* checked mark aspect changes */\r\ninput[type="checkbox"]:not(:checked) + label:after {\r\n  opacity: 0;\r\n  transform: scale(0);\r\n}\r\ninput[type="checkbox"]:checked + label:after {\r\n  opacity: 1;\r\n  transform: scale(1);\r\n}

\r\n

<div class="col-md-12">\r\n   <input id="checkid"  type="checkbox">\r\n   <label for="checkid">Fixed</label>\r\n</div>\r\n\r\n<div class="col-md-12">\r\n   <input id="checkid2"  type="checkbox">\r\n   <label for="checkid2">Label can now vary in length</label>\r\n</div>

\r\n

\r\n

\r\n

\n