单选按钮CSS

Question

我试图弄清楚如何使用css以相同的方式替换我的所有单选按钮。是否可以使用css使这些单选按钮无论输入位置在哪里都可以工作？我不想要调整行或任何东西。只需抓住单选按钮并按照下面示例中的方式进行处理即可。

＆＃13;

＆＃13;

body {
  background-color: white;
  margin: 0;
  padding: 0;
}
input[type='radio'] {
  display: none;
}
.radio {
  border: 1px solid #b3b4b4;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  float: left;
  height: 16px;
  margin: 10px 10px 0 0;
  padding: 10px;
  position: relative;
  width: 16px;
}
.row:hover .radio {
  border: 2px solid #218996;
}
input[type='radio']:checked + .radio {
  background-color: #218996;
  border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
  content: "✓ ";
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size:
}
.row {
  border-bottom: 1px solid #dcdcdc;
  padding: 0 5px;
}
.row label {
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}
.row > label:last-child {
  padding: 12px 0;
  width: calc(100% - 50px);
  cursor: pointer;
}

＆＃13;

<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
  <div>
    <!---Label is here for placement of error message--->
    <label for="rgroup" class="error" style="display:none;">Please choose one.</label>
  </div>

  <div class='row'>
    <input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
    <label for="one" class='radio' tabindex='1'></label>
    <label for="one">MOTOR VEHICLE / TRAVEL TRAILER TITLE</label>
  </div>

  <div class='row'>
    <input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
    <label for="two" class='radio' tabindex='1'></label>
    <label for="two">MOBILE HOME</label>
  </div>

  <div class='row'>
    <input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
    <label for="three" class='radio' tabindex='1'></label>
    <label for="three">VESSEL</label>
  </div>

  <div class='row'>
    <input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
    <label for="four" class='radio' tabindex='1'></label>
    <label for="four">DUPLICATE</label>
  </div>

  <div>
    <button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
  </div>

＆＃13;

＆＃13;

＆＃13;

我希望输入无线电能够像这些单选按钮一样工作，无论是在桌子上还是在任何地方，只需通过调用该类。这可能吗？

Answer 1

根据评论中的对话，我稍微修改了CSS，使其在设计的行之外工作。主要是，我向clear: both;添加了.radio以将每个输入添加到新行，并将float: left;添加到两个标签中，以便它们保持一致。

input[type='radio'] {
  clear: both;
  float: left;
  width: 20px;
  height: 10px;
  opacity: 0;
}
.radio {
  border: 1px solid #b3b4b4;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 16px;
  margin: 0 10px 10px -20px;
  padding: 10px;
  position: relative;
  width: 16px;
}
input[type='radio']:checked + .radio {
  background-color: #218996;
  border-color: #218996;
}
input[type='radio']:active + .radio,
input[type='radio']:focus + .radio {
  border-color: lightblue;
}
input[type='radio']:checked + .radio::before {
  content: "✓ ";
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
label {
  float: left;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}

<input id="one" type="radio" name="rgroup" tabindex='1' />
<label for="one" class='radio'></label>
<label for="one">Button 1</label>

<input id="two" type="radio" name="rgroup" tabindex='2' />
<label for="two" class='radio'></label>
<label for="two">Button 2</label>

Answer 2

当你说按类做的时候，你的意思是你希望能够在没有JS / jQ的情况下从一个状态切换到另一个状态吗？这是我在CSS中做的一个演示，它演示了如何挂钩到radio或checkbox``:checked状态。

添加了OP的示例并在悬停时修复了抖动。当状态具有比其对应物更多的填充，边距，字体大小，边框等时，会发生这种副作用。例如，以Snippet 2为例。

• 当悬停在收音机按钮上时，行会在周围晃动，这非常刺激和分散注意力。在这种情况下，有几个规则集的边界为1px，而其他规则集为2px。您所要做的就是确保所有边框都具有相同的宽度。

• 在每个收音机中添加了box-shadow插页，以便在悬停时给予他们一些深度。

• 为每一行添加box-shadow以便稍微定义它们。

• 也为每一行添加了动画边框。

SNIPPET 1

html,
body {
  box-sizing: border-box;
  background: #111;
  color: #DDD;
  font: 400 16px/1.4'Verdana';
  height: 100vh;
  width: 100vw;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0 none hlsa(0%, 0, 0, 0);
  outline: 0 none hlsa(0%, 0, 0, 0);
}
fieldset {
  margin: 0 1em 1em 0;
  padding: 8px;
  border-radius: 9px;
  border: 3px double #FF8;
  width: 100%;
  max-width: 19em;
}
legend {
  font: small-caps 700 1.5rem/2"Palatino Linotype";
  color: #FD1;
}
/* CheX */

#chex input.chkrad {
  display: none;
}
#chex input.chkrad + label {
  color: #DDD;
  font-size: 16px;
}
#chex input.chkrad + label span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: -1px 15px 0 0;
  vertical-align: baseline;
  cursor: pointer;
}
#chex input + label span {
  background: #555;
  line-height: 100%;
}
input.X:checked + label span {
  padding: -3px 10px 3px;
}
input.X:checked + label span:before {
  content: 'X';
  color: #F00;
  font-family: cursive;
  font-style: oblique;
  font-weight: 900;
  font-size: 20px;
}
/* RadZ */

#radz input.chkrad {
  display: none;
}
#radz input.chkrad + label {
  color: #EEE;
  font-size: 16px;
}
#radz input.chkrad + label span {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -1px 15px 0 0;
  vertical-align: baseline;
  cursor: pointer;
}
#radz input + label span {
  background: #555;
  line-height: 100%;
}
input.A:checked + label span {
  padding: -5px 15px 5px;
  font-size: 16px;
}
input.A:checked + label span:before {
  content: '';
  color: #e3e;
  font-family: cursive;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
}
input.B:checked + label span {
  padding: -5px 15px 5px;
  font-size: 16px;
}
input.B:checked + label span:before {
  content: '';
  color: #f99;
  font-family: cursive;
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  margin: 0 30px 0 0;
  text-align: left;
}
input.C:checked + label span {
  padding: -2px 15px 2px;
  font-size: 16px;
}
input.C:checked + label span:before {
  content: '';
  color: #3ef;
  font-family: cursive;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: .75;
  vertical-align: bottom;
  margin-top: 5px;
}
input.D:checked + label span {
  padding: -5px 15px 5px;
  font-size: 16px;
}
input.D:checked + label span:before {
  content: '';
  color: #eee;
  font-family: cursive;
  font-style: normal;
  font-weight: 100;
  font-size: 20px;
  line-height: .75;
}
input.fade + label span,
input.fade:checked + label span {
  -webkit-transition: background 0.7s linear;
  -moz-transition: background 0.7s linear;
  transition: background 0.7s linear;
}
.red {
  color: red;
}

<fieldset id="chex" name="chex">
  <legend><span class="red">X</span> Marks the Checkbox</legend>
  <input type='checkbox' name='chk3' id="chk3" class="chkrad X fade" value='x' />
  <label for="chk3"><span></span>Red "X" mark</label>
</fieldset>

<fieldset id="radz" name="radz">
  <legend>Shore Leave</legend>
  <input type='radio' name='rad' id="rad1" class="chkrad A fade" value='1' />
  <label for="rad1"><span></span>Brawl</label>
  <br/>
  <input type='radio' name='rad' id="rad2" class="chkrad B fade" value='2' />
  <label for="rad2"><span></span>Women</label>
  <br/>
  <input type='radio' name='rad' id="rad3" class="chkrad C fade" value='3' />
  <label for="rad3"><span></span>Drink</label>
  <br/>
  <input type='radio' name='rad' id="rad4" class="chkrad D fade" value='4' />
  <label for="rad4"><span></span>All of the above, matey!</label>
  <br/>
</fieldset>

SNIPPET 2

body {
  background-color: white;
  margin: 0;
  padding: 0;
}
input[type='radio'] {
  display: none;
}
.radio {
  border: 2px solid #b3b4b4;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  display: table-cell;
  float: left;
  line-height: 100%;
  margin: 10px 10px 0 0;
  padding: 10px;
  position: relative;
  width: 16px;
}
.row:hover .radio {
  border: 2px solid #218996;
  box-shadow: inset 0 0 10px #218996;
}
input[type='radio']:checked + .radio {
  background-color: #218996;
  border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
  content: "✓ ";
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.row {
  border-bottom: 2px solid #dcdcdc;
  padding: 0 5px;
  box-shadow: 0 0 10px rgba(0, 128, 192, .3);
}
.row label {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-variant: small-caps;
  font-weight: bold;
}
.row > label:last-child {
  padding: 12px 0;
  width: calc(100% - 50px);
  cursor: pointer;
}
.btn-u {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-variant: small-caps;
  font-weight: bold;
}
.row.bdr {
  display: block;
  position: relative;
  padding-bottom: 1.5px;
}
.row.bdr::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  transition: width 0s ease, background .5s ease;
}
.row.bdr::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: rgba(51, 112, 44, .4);
  transition: width .5s ease;
}
.row.bdr:hover::before {
  width: 100%;
  background: rgba(100, 177, 255, .4);
  transition: width .5s ease;
}
.row.bdr:hover::after {
  width: 100%;
  background: transparent;
  transition: all 0s ease;
}

<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
  <div>
    <!---Label is here for placement of error message--->
    <label for="rgroup" class="error" style="display:none;">Please choose one.</label>
  </div>

  <div class='row bdr'>
    <input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
    <label for="one" class='radio' tabindex='1'></label>
    <label for="one">Motor Vehicle / Travel Trailer Title</label>
  </div>

  <div class='row bdr'>
    <input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
    <label for="two" class='radio' tabindex='1'></label>
    <label for="two">Moble Home</label>
  </div>

  <div class='row bdr'>
    <input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
    <label for="three" class='radio' tabindex='1'></label>
    <label for="three">Vessel</label>
  </div>

  <div class='row bdr'>
    <input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
    <label for="four" class='radio' tabindex='1'></label>
    <label for="four">Duplicate</label>
  </div>

  <div>
    <button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
  </div>