自定义单选按钮 [英] Customizing Radio buttons

问题描述

-webkit-appearance在使您自定义单选按钮的外观方面做了出色的工作。但是，不使用webkit和旧版浏览器的浏览器并不真正支持这一点。
所以它不工作。

-webkit-appearance does a wonderful job at letting you customize the appearance of your radio buttons. However, browsers that don't use webkit and older browsers, don't really support this. So it wont work.

我正在寻找一个解决方案，将工作与两个，浏览器不使用webkit（如Firefox和IE）和

I am looking for a solution that will work with both, browsers that don't use webkit (like Firefox and IE) and older webkit browsers that don't support CSS3.

input[type="radio"] {
    margin: 50px 50px 0 0; padding: 0;
    width: 200px; height: 200px;
    position: relative; clear: none; float: left; display: inline-block;

    cursor: pointer; outline: none;
    background-color: #231f20;
    -webkit-appearance: none;
}

任何想法/解决方案？

推荐答案

实现想法有时并不容易。如果用户只需要点击/悬停在圆形（单选按钮）上即可与之交互，我们可以轻松地自定义收音机。但是单选按钮的正常行为也允许用户点击/悬停在标签文本上以与其交互。这意味着我们可能需要一个标签（对于文本）。但这不是那么容易。该标签只能允许用户点击与隐藏的收音机交互，悬停在该标签上不会影响任何东西（通常最后添加该标签，所以我们也没有办法向后移动来选择假的收音机所以我决定只使用1个标签，这个标签是由两个伪元素：before 和：after 包含一个空的 span 元素作为第一个孩子，下面这个span当然是单选按钮的文本。 span 元素是我们的假的无线电的样式，但是如果让他们默认内联，文本是长的，它将跳转到下一行，垂直排列与伪造收音机的左边缘（在上面的第一因此我们需要使标签显示为一个表格（使用 display：table ），第一列是 span 元素（apply display：table-cell ） ，标签文本将被第二列自动包装。

Realizing an idea sometimes is not really easy. If user just need to click/hover on the circle (of the radio button) to interact with it, we can easily customize the radio. But the normal behavior of a radio button is also allow user to click/hover on the label text to interact with it. That means we may need one more label (for the text). But it's not such easy. That label can only allow user to click to interact with the hidden radio, hovering on that label won't effect anything (normally that label is appended at last, so we also have no way to traverse backwards to select the fake radio (which are made by 2 pseudo-element :before and :after). So I decided to use only 1 label. This label contains an empty span element as the first child, following this span is of course the text for the radio button. The span element is where we style the fake radio. However if letting them inline by default and the text is long, it will jump to the next line and vertically line up with the left edge of the fake radio (which is right above at the first line) , this is considered to be very ugly and should be avoided. So we need to make the label displayed as a table (using display:table), the first column is the span element (apply display:table-cell), the label text will be automatically wrapped by the second column. That way when the text is long, all the lines will be wrapped by the second column.

这里是代码的细节：

HTML ：

<div>
  <span class='radio'>
    <input type='radio' id='r1'name='radios' checked='true'/>
    <label for='r1'><span></span>
      Can I be wrapped when I grow longer and longer?
    </label>
  </span><br/>
  <span class='radio'>
    <input type='radio' id='r2' name='radios'/>
    <label for='r2'><span></span>Vote me up please :)</label>
  </span>
</div>

CSS ：

span.radio > input[type='radio'] {
  display:none;    
}
span.radio > label {    
  display:table;     
}
span.radio > label > span {
  display:table-cell;
  width:20px;    
  white-space:nowrap;    
}
span.radio > label > span:before {
  content:'';
  width:20px;
  height:20px;
  border-radius:50%;
  display:inline-block;
  box-shadow: 0 0 4px 2px gray inset;
  vertical-align:middle;       
}

span.radio > label > span:after {
  content:'';
  position:relative;    
  display:inline-block;
  vertical-align:middle; 
  left:-16px;    
  width:12px;
  height:12px;
  border-radius:50%;
  box-shadow:0 0 3px 1px red;
  background:radial-gradient(circle at 2px 2px, white, red);
  visibility:hidden;
}
span.radio > label:hover > span:before {
  box-shadow: 0 0 5px 3px orange inset;
}
span.radio > input[type='radio']:checked + label > span:after {
  visibility:visible;
}
span.radio {    
  display:inline-block;
  margin-bottom:3px;
}

/* This is not part of the custom radio input, it's just a group container 
to test the text wrapping ability of the label text */
div {
  border:1px solid black;
  width:400px;     
  font-size:30px;
  padding:5px;
}

请注意，上面HTML代码中的外部div只是一个容器2个单选按钮，用于测试是否能够打包长文本。

Note that the outer div in the HTML code above is just a container grouping the 2 radio buttons to test the ability to wrap the long text.

这里是 工作演示。

Here is the Working Demo.

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