自定义单选按钮显示里面的值

我有自定义单选按钮，他们正在按照我打算他们有一个例外。我希望该值位于单选按钮div的内部，现在它显示在我创建的单选按钮之外，实际上它是一个大类广播。 我怎么能把我创建自定义单选按钮显示里面的值

下面

的单选按钮，里面的值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/

感谢

来源

2012-09-07 Autolycus

什么是你想实现这里？重点是什么”？ – Chris

我试图把文本放在我创建的单选按钮css中 – Autolycus

你不能;输入元素不能包含任何子节点（甚至不包含文本^ 1）。如果你需要这个，那么你需要用'div'（或'span'）来包装'input'，并且将该文本放在* that *元素中，作为输入的兄弟。 ** 1：**虽然'input type =“text”'*可以*包含一个值，类似。 –

我会使用数据属性：

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

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

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

来源

2012-09-07 19:15:55 Thomas

你可以种假的吧，虽然这是很不理想。如果您使用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替换所有内容。

来源

2012-09-07 19:13:12

自定义单选按钮显示里面的值

回答

相关问题