如何在输入检查中选择单选按钮？

时间：2016-06-16 20:30:17

标签： html css forms input radio-button

我试图将单击单选按钮时出现的蓝色圆圈居中。

body {
  margin: 3em;
  font-size: 24px;
  font-family: arial;
}

/* Input Controls */

label {
  line-height: 1em;
	position: relative;
  overflow: show;
  cursor: pointer;
	margin-right: 1em;
}

label input {
  margin: 0 .15em 0 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  top: -.1em;
}

input[type="radio"], input[type="checkbox"] {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 1em;
  line-height: 1
}

input[type="radio"]:before, input[type="radio"]:after, input[type="checkbox"]:before, input[type="checkbox"]:after {
	width: 100% !important;
  height: 100% !important;
  display: inline-block;
  content:'';
	font-family: 'icons-presto', fantasy !important;
	font-style: normal !important;
	font-weight: normal !important;
	line-height: 1;
}

input[type="radio"]:before, input[type="checkbox"]:before  {
	background: rgb(254,234,234);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(254,234,234,1) 100%); /* W3C — Add Browser extension versions for greater backwards compatibility */
	border: 1px solid rgb(204,170,170);
	box-shadow: 1px 1px 1px rgba(0,0,0,.1);
	position: relative;
  top: 0;
  left: 0;
}

input[type="radio"]:after, input[type="checkbox"]:after  {
	  color: rgb(65,146,238);
	  position: absolute;
	  opacity: 0;
	  text-align: center;
	  top: 0;
	  left: 0;
}

input[type="radio"]:checked:before, input[type="checkbox"]:checked:before  {
	background: rgb(234,234,254);
	background: linear-gradient(to bottom, rgba(214,214,254,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
	border-color: rgba(65,146,238,.5);
	box-shadow: 1px 1px 1px rgba(0,0,0,.1) inset;
}

input[type="radio"]:before {
	border-radius: 2em;
}

input[type="radio"]:after {
	  content: "•";
  font-size: 2em;
  line-height: .35;
  left: .025em;
}

input[type="radio"]:hover:after {
	opacity: .25;
}

input[type="radio"]:checked:after {
	opacity: 1;
}

input[type="checkbox"]:before {
	border-radius: .25em;
	color:rgba(170,170,170,0);
}

input[type="checkbox"]:after {
	content: "✔";
}

input[type="checkbox"]:hover:after {
	opacity: .25;
}

input[type="checkbox"]:checked:after {
	opacity: 1;
}
<form>   


	<label for="option1">
     <input type="radio" name="radiotest" value="option1" id="option1"  />
     Option 1
  </label>
  
  <label for="option2">
     <input type="radio" name="radiotest" value="option2" id="option2" />
     Option 2
  </label>
  
  <label for="option3">
     <input type="radio" name="radiotest" value="option3" id="option3" />
     Option 3
  </label>
  
  <label for="option4">
     <input type="radio" name="radiotest" value="option4" id="option4" />
     Option 4
  </label>

	 <hr>
	
   
	 <label for="c1">
     <input type="checkbox" id="c1" name="cc" />
     Checkbox 1
   </label>      
	 <label for="c2">
     <input type="checkbox" id="c2" name="cc" />
     Checkbox 2
   </label>   
	 <label for="c3">
     <input type="checkbox" id="c3" name="cc" />
     Checkbox 3
   </label>
	 <label for="c4">
     <input type="checkbox" id="c4" name="cc" />
     Checkbox 4
   </label>
     
 
  </form>

1 个答案:

答案 0 :(得分：0)

更新此内容。它可以解决您的问题。

input[type="radio"]:after {
      content: "•";
  font-size: 2em;
  line-height: .55;
  left: .025em;
}

＆＃13;
＆＃13; 
body {
  margin: 3em;
  font-size: 24px;
  font-family: arial;
}
/* Input Controls */

label {
  line-height: 1em;
  position: relative;
  overflow: show;
  cursor: pointer;
  margin-right: 1em;
}
label input {
  margin: 0 .15em 0 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  top: -.1em;
}
input[type="radio"],
input[type="checkbox"] {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 1em;
  line-height: 1
}
input[type="radio"]:before,
input[type="radio"]:after,
input[type="checkbox"]:before,
input[type="checkbox"]:after {
  width: 100% !important;
  height: 100% !important;
  display: inline-block;
  content: '';
  font-family: 'icons-presto', fantasy !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1;
}
input[type="radio"]:before,
input[type="checkbox"]:before {
  background: rgb(254, 234, 234);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(254, 234, 234, 1) 100%);
  /* W3C — Add Browser extension versions for greater backwards compatibility */
  border: 1px solid rgb(204, 170, 170);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
  position: relative;
  top: 0;
  left: 0;
}
input[type="radio"]:after,
input[type="checkbox"]:after {
  color: rgb(65, 146, 238);
  position: absolute;
  opacity: 0;
  text-align: center;
  top: 0;
  left: 0;
}
input[type="radio"]:checked:before,
input[type="checkbox"]:checked:before {
  background: rgb(234, 234, 254);
  background: linear-gradient(to bottom, rgba(214, 214, 254, 1) 0%, rgba(255, 255, 255, 1) 100%);
  /* W3C */
  border-color: rgba(65, 146, 238, .5);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .1) inset;
}
input[type="radio"]:before {
  border-radius: 2em;
}
input[type="radio"]:after {
  content: "•";
  font-size: 2em;
  line-height: .55;
  left: .025em;
} 
input[type="radio"]:hover:after {
  opacity: .25;
}
input[type="radio"]:checked:after {
  opacity: 1;
}
input[type="checkbox"]:before {
  border-radius: .25em;
  color: rgba(170, 170, 170, 0);
}
input[type="checkbox"]:after {
  content: "✔";
}
input[type="checkbox"]:hover:after {
  opacity: .25;
}
input[type="checkbox"]:checked:after {
  opacity: 1;
}
＆＃13; 
<form>


  <label for="option1">
    <input type="radio" name="radiotest" value="option1" id="option1" />Option 1
  </label>

  <label for="option2">
    <input type="radio" name="radiotest" value="option2" id="option2" />Option 2
  </label>

  <label for="option3">
    <input type="radio" name="radiotest" value="option3" id="option3" />Option 3
  </label>

  <label for="option4">
    <input type="radio" name="radiotest" value="option4" id="option4" />Option 4
  </label>

  <hr>


  <label for="c1">
    <input type="checkbox" id="c1" name="cc" />Checkbox 1
  </label>
  <label for="c2">
    <input type="checkbox" id="c2" name="cc" />Checkbox 2
  </label>
  <label for="c3">
    <input type="checkbox" id="c3" name="cc" />Checkbox 3
  </label>
  <label for="c4">
    <input type="checkbox" id="c4" name="cc" />Checkbox 4
  </label>


</form>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题