代码之家  ›  专栏  ›  技术社区  ›  David Brierton

单选按钮CSS

css
  •  3
  • David Brierton  · 技术社区  · 8 年前

    我试图找出如何使用css以相同的方式替换所有单选按钮。是否可以使用css使这些单选按钮工作,而不管输入的位置在哪里?我不想让你不得不调整排或任何事情。只需抓住单选按钮并按我在下面示例中使用的方式将其选中即可。 

    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;
}
    <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>

    我希望通过调用类,输入收音机能够像这些单选按钮一样工作,无论是在桌子上还是任何地方。这可能吗?

    2 回复  |  直到 8 年前
        1
  •  4
  •   Jon Uleis    8 年前

    根据我们在评论中的对话,我稍微修改了您的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>
        2
  •  0
  •   zer00ne    8 年前

    当你说“按类执行”时,你的意思是你想在没有JS/jQ的情况下从一个状态切换到另一个状态吗?下面是我在CSS中做的一个演示,演示了如何连接到 radio 或 checkbox``:checked 状态

    添加了OP的示例,并修复了悬停时的抖动。当一个状态的填充、边距、字体大小、边框等超过其对应状态时,会出现这种副作用。例如,以片段2为例。

    • 当鼠标悬停在单选按钮上时,row会左右晃动,这非常令人恼火和分心。在本例中,有几个规则集的边界为1px,而其他规则集的边框为2px。您所要做的就是确保所有边框的宽度相同。

    • 添加插图 box-shadow 给每一个无线电设备提供悬停的深度。

    • 补充 盒影 以稍微定义它们。

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

    片段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>

    片段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>
    推荐文章
    Yunusović  ·  我无法用css更改html段落颜色
    1 年前
    Blake  ·  无法使用CSS旋转Angular 15中的字体图标
    1 年前
    Maarten -Monica for president  ·  将图像放在锚点标记内时调整网格中的图像大小
    1 年前
    Phil Lucks  ·  如何制作边界的外半径?
    1 年前
    roy_meir  ·  创建自定义下拉式元素
    1 年前
    Community wiki  ·  如何为触摸设备优化网站
    1 年前
    Paras Chandravanshi  ·  为什么<ul>没有从其父<p>元素继承?
    1 年前
    tpetzoldt  ·  如何在有光泽的情况下抑制图像的抗锯齿?
    1 年前
    boyenec  ·  反应如何将css样式应用于我从api respose获得的页面的spcifc部分
    1 年前
    manofconstsorrow  ·  点击导航项目关闭汉堡菜单
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号