使用图像代替单选按钮 [英] Use images instead of radio buttons

问题描述

如果我有一个带按钮的单选组:

...如何在选择选项中仅显示图像而不是按钮，例如

解决方案

• 将radio和图像包裹在
中
• 隐藏单选按钮(不要使用display:none或visibility:hidden，因为这会影响可访问性)
• 使用

  body{color:#444;font:100%/1.4 sans-serif;}/* 自定义收音机 &复选框http://stackoverflow.com/a/17541916/383904 */.rad,.ckb{光标:指针；用户选择:无；-webkit-user-select:无；-webkit-touch-callout:无；}.rad >输入，.ckb>输入{/* 隐藏组织收音机 &复选框 */位置:绝对；不透明度:0；宽度:0；高度:0；}/* 无线电 &复选框样式 *//* 默认 <i>风格 */.rad >一世，.ckb>一世{显示:内联块；垂直对齐:中间；宽度:16px；高度:16px；边界半径:50%；过渡:0.2s；框阴影:插入 0 0 0 8px #fff;边框:1px纯灰色；背景:灰色；}/* 复选框覆盖样式 */.ckb>一世 {宽度:25px；边框半径:3px；}.rad:悬停>i{/* 悬停 <i>风格 */框阴影:插入 0 0 0 3px #fff;背景:灰色；}.rad >输入:检查 + i{/*(无线电检查)<i>风格 */框阴影:插入 0 0 0 3px #fff;背景:橙色；}/* 复选框 */.ckb>输入 + i:after{内容: "";显示:块；高度:12px；宽度:12px；边距:2px；边界半径:继承；过渡:继承；背景:灰色；}.ckb>input:checked + i:after{/* (RADIO CHECKED) 风格 */左边距:11px；背景:橙色；}

  <input type="radio" name="rad1" value="a"><i></i>电台 1<label class="rad"><input type="radio" name="rad1" value="b"checked><i></i>电台 2<br><label class="ckb"><input type="checkbox" name="ckb1" value="a"已选中><i></i>复选框 1<label class="ckb"><input type="checkbox" name="ckb2" value="b"><i></i>复选框 2</label>

  If I have a radio group with buttons:

  ... how can I show only images in the select option instead of the buttons, e.g.

  解决方案

  • Wrap radio and image in <label>
  • Hide radio button (Don't use display:none or visibility:hidden since such will impact accessibility)
  • Target the image next to the hidden radio using Adjacent sibling selector +

  /* HIDE RADIO */
  [type=radio] { 
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* IMAGE STYLES */
  [type=radio] + img {
    cursor: pointer;
  }
  
  /* CHECKED STYLES */
  [type=radio]:checked + img {
    outline: 2px solid #f00;
  }

  <label>
    <input type="radio" name="test" value="small" checked>
    <img src="http://placehold.it/40x60/0bf/fff&text=A">
  </label>
  
  <label>
    <input type="radio" name="test" value="big">
    <img src="http://placehold.it/40x60/b0f/fff&text=B">
  </label>

  _{Don't forget to add a class to your labels and in CSS use that class instead.}

  ---

  Custom styles and animations

  Here's an advanced version using the <i> element and the :after pseudo:

  body{color:#444;font:100%/1.4 sans-serif;}
  
  
  /* CUSTOM RADIO & CHECKBOXES
     http://stackoverflow.com/a/17541916/383904 */
  .rad,
  .ckb{
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .rad > input,
  .ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  /* RADIO & CHECKBOX STYLES */
  /* DEFAULT <i> STYLE */
  .rad > i,
  .ckb > i{ 
    display: inline-block;
    vertical-align: middle;
    width:  16px;
    height: 16px;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: inset 0 0 0 8px #fff;
    border: 1px solid gray;
    background: gray;
  }
  /* CHECKBOX OVERWRITE STYLES */
  .ckb > i {
    width: 25px;
    border-radius: 3px;
  }
  .rad:hover > i{ /* HOVER <i> STYLE */
    box-shadow: inset 0 0 0 3px #fff;
    background: gray;
  }
  .rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
    box-shadow: inset 0 0 0 3px #fff;
    background: orange;
  }
  /* CHECKBOX */
  .ckb > input + i:after{
    content: "";
    display: block;
    height: 12px;
    width:  12px;
    margin: 2px;
    border-radius: inherit;
    transition: inherit;
    background: gray;
  }
  .ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
    margin-left: 11px;
    background:  orange;
  }

  <label class="rad">
    <input type="radio" name="rad1" value="a">
    <i></i> Radio 1
  </label>
  <label class="rad">
    <input type="radio" name="rad1" value="b" checked>
    <i></i> Radio 2
  </label>
  
  <br>
  
  <label class="ckb">
    <input type="checkbox" name="ckb1" value="a" checked>
    <i></i> Checkbox 1
  </label>
  <label class="ckb">
    <input type="checkbox" name="ckb2" value="b">
    <i></i> Checkbox 2
  </label>

  这篇关于使用图像代替单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！