Php 自定义单选按钮显示内部值

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

下面是我的代码

css:

.ipad{
-webkit外观：无；
背景色：#fafafa；
边框：1px实心卡；
盒影：0 1px2pxRGBA（0,0,0,0.05），嵌入0px-15px 10px-12px rgba（0,0,0.05）；
填充：9px；
边界半径：3px；
显示：内联块；
位置：相对位置；
}
.ipad:active、.ipad:checked:active{
盒影：0 1px 2px rgba（0,0,0,0.05），嵌入0 px 1px 3px rgba（0,0,0,0.1）；
}
.ipad：选中{
背景颜色：蓝色；
边框：1px实心#adb8c0；
盒影：0 1px 2px rgba（0,0,0,0.05），镶嵌0px-15px 10px-12px rgba（0,0,0.05），镶嵌15px 10px-12px rgba（255255,0.1）；
颜色：#99a1a7；
}
.ipad:选中：之后{
内容：'\2714'；
字体大小：14px；
位置：绝对位置；
顶部：0px；
左：3px；
颜色：透明；
}
.大收音机{
填充：18px；
}
.大收音机：检查：之后{
字号：28px；
左：6px；
}

HTML:

价值1
价值2

请在此处找到JSFIDLE：

---

谢谢

你可以假装一下，尽管这离理想还很远。如果使用

标签

，则可以将文本覆盖在单选按钮上，而不会失去其可点击性。下面是一个例子：

---

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

你可以假装它，尽管它远不理想。如果使用

标签

，则可以将文本覆盖在单选按钮上，而不会失去其可点击性。下面是一个例子：

---

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

我会使用数据属性：

对每个输入使用html属性：

然后在css中：

.ipad:before{content:attr（数据值）；}

---

我会使用数据属性：

对每个输入使用html属性：

然后在css中：

.ipad:before{content:attr（数据值）；}

---

您在这里想要实现什么？“要点”是什么？我试图把文本放在我创建的单选按钮css中，但你不能；输入元素不能包含任何子节点（甚至不能包含文本^1）。如果需要，则需要使用

div

（或

span

）包装

input

，并将文本作为

input

的同级元素放在该元素中。1：虽然一个

input type=“text”

可以包含一个类似的值。您在这里想要实现什么？“要点”是什么？我试图把文本放在我创建的单选按钮css中，但你不能；输入元素不能包含任何子节点（甚至不能包含文本^1）。如果需要，则需要使用

div

（或

span

）包装

input

，并将文本作为

input

的同级元素放在该元素中。1：虽然

input type=“text”

可以包含一个类似的值。

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

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

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