自定义单选按钮在里面显示值答案

【问题标题】：custom radio button show value inside自定义单选按钮在里面显示值
【发布时间】：2012-09-08 03:55:48
【问题描述】：

我已经自定义了单选按钮，它们按我的预期工作，但有一个例外。我希望该值位于单选按钮 div 内，现在它显示在我创建的单选按钮之外，这实际上是一个类 big-radio。 如何在我创建的单选按钮中显示值 1 和值 2

下面是我的代码

css:

<style>
    .ipad {
        -webkit-appearance: none;
        background-color: #fafafa;
        border: 1px solid #cacece;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
        padding: 9px;
        border-radius: 3px;
        display: inline-block;
        position: relative;
    }

    .ipad:active, .ipad:checked:active {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
    }

    .ipad:checked {
        background-color: blue;
        border: 1px solid #adb8c0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        color: #99a1a7;
    }
    .ipad:checked:after {
        content: '\2714';
        font-size: 14px;
        position: absolute;
        top: 0px;
        left: 3px;
        color: transparent;
    }
    .big-radio {
        padding: 18px;
    }

    .big-radio:checked:after {
        font-size: 28px;
        left: 6px;
    }



</style>

HTML：

<div class="button-holder">
    <input type="radio" class="ipad big-radio" name="radioGroup" value="2081764"/> Value1
</div>
<div class="button-holder">
    <input type="radio" class="ipad big-radio" name="radioGroup" value="2081765"/> Value 2
</div>

请在此处找到 jsfiddle：

http://jsfiddle.net/4fu3q/

谢谢

【问题讨论】：

你想在这里实现什么？ “重点”是什么？
我正在尝试将文本放在我创建的单选按钮 css 中
你不能；输入元素不能包含任何子节点（甚至 text^1）。如果你需要这个，那么你需要用div（或span）包裹input，并将文本放在that元素中，作为input的兄弟。 1：虽然input type="text"可以包含一个类似的值。

标签： php html css

【解决方案1】：

我会使用数据属性：

对每个输入使用 html 属性：<input data-value="Value Text">

然后在你的 css 中：.ipad:before { content: attr(data-value); }

http://jsfiddle.net/4fu3q/3/

【讨论】：

【解决方案2】：

你可以假装它，虽然它远非理想。如果您使用label，您可以将文本覆盖在单选按钮上而不会失去其可点击性。下面是一个例子：

http://jsfiddle.net/4fu3q/2/

<div class="button-holder">
    <input type="radio" class="ipad big-radio"  name="radioGroup" value="2081764" id="one">  
    <label for="one">V1</label>
</div>

label{
    position:relative;
    left: -35px;    
    top: -10px;
}

按钮显然不会重新调整大小以适应文本，因为它实际上不在其中。它远非理想，但在不使用 javascript 替换所有内容的情况下可能会尽可能接近。

【讨论】：