无法用CSS复制复选框?

时间:2015-03-11 07:29:28

标签: html css

我甚至点击了Google搜索结果的第二页,了解发生了什么,并且至少已经持续了三个小时。我没看到什么?没有多少css似乎能够触摸复选框。

Codepen

HTML

<div>
    <input type="checkbox" id="checkbox-1" />
    <label for="checkbox-1">Enable cat</label>
</div>

CSS

#checkbox-1:before + label{ 
    background-color: yellow;
    color: yellow;
    background: red;
    outline: 2px solid red;
}

#checkbox-1:checked + label{ 
    background-color: yellow;
    color: yellow;
    background: red;
}

2 个答案:

答案 0 :(得分:3)

您可以自定义复选框,以供参考

&#13;
&#13;
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 17px; height: 17px;
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: 0; left: 4px;
  font-size: 14px;
  color: #09ad7e;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}

/* hover style just for information */
label:hover:before {
  border: 1px solid #4778d9!important;
}






/* Useless styles, just for demo design */

body {
  font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
  color: #777;
}
h1, h2 {
  margin-bottom: 5px;
  font-weight: normal;
  text-align: center;
}
h2 {
  margin: 5px 0 2em;
  color: #aaa;
}
form {
  width: 80px;
  margin: 0 auto;
}
.txtcenter {
  margin-top: 4em;
  font-size: .9em;
  text-align: center;
  color: #aaa;
}
.copy {
 margin-top: 2em; 
}
.copy a {
 text-decoration: none;
 color: #4778d9;
}
&#13;
<h1>Custom checkboxes with CSS only</h1>
<h2>"automatic" fallback for IE</h2>

<form action="#">
  <p>
    <input type="checkbox" id="test1" />
    <label for="test1">Red</label>
  </p>
  <p>
    <input type="checkbox" id="test2" checked="checked" />
    <label for="test2">Yellow</label>
  </p>
  <p>
    <input type="checkbox" id="test3" checked="checked" disabled="disabled" />
    <label for="test3">Green</label>
  </p>
    <p>
      <input type="checkbox" id="test4" disabled="disabled" />
      <label for="test4">Brown</label>
  </p>
</form>



<p class="txtcenter">Custom styles on modern browsers.<br/>Classical checkboxes on IE8 and lower.</p>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

&#13;
&#13;
/* SLIDE ONE */
.slideOne {
	width: 50px;
	height: 10px;
	background: #333;
	margin: 20px auto;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	position: relative;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.slideOne label {
	display: block;
	width: 16px;
	height: 16px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
	-ms-transition: all .4s ease;
	transition: all .4s ease;
	cursor: pointer;
	position: absolute;
	top: -3px;
	left: -3px;

	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.slideOne input[type=checkbox]:checked + label {
	left: 37px;
}
&#13;
<div class="slideOne">	
	<input type="checkbox" value="None" id="slideOne" name="check" />
	<label for="slideOne"></label>
</div>
&#13;
&#13;
&#13;

See Domo

参考:here