Question

我必须使用单选按钮，我想为每个人创建一个文本值，有些人认为是和不。

<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/> 
<input type="radio" name="tabGroup1" id="rad2" class="tab2"/>

如果我能用CSS为这些收音机制作文字，我想知道吗？

喜欢：

.tab1{
   content:'Yes';
}
.tab2{
   content:'No';
}

Answer 1

.tab1:after{
  content: 'Yes';
  margin-left: 1.5em;
}
.tab2:after{
  content: 'No';
  margin-left: 1.5em;
}

以下是一个示例：http://codepen.io/anon/pen/avGdwB（请注意HTML中的换行符。）

Answer 2

使用：after for content property。

HTML

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:paddingLeft="24dp"
        android:text="1. Do you have an anti-virus installed on your computer :"
        android:textAllCaps="false" />

    <RadioGroup
        android:id="@+id/radio_virus"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="48dp">

        <RadioButton
            android:id="@+id/radio_virusyes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:onClick="assessUserInput"
            android:text="Yes" />

        <RadioButton
            android:id="@+id/radio_virusno"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="assessUserInput"
            android:text="No" />
    </RadioGroup>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="48dp"
        android:text="If No, skip question 2"
        android:textAllCaps="false" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:paddingLeft="24dp"
        android:text="2. How many anti-viruses do you use on your laptop :"
        android:textAllCaps="false" />

    <RadioGroup
        android:id="@+id/radio_avnumber"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="48dp">

        <RadioButton
            android:id="@+id/radio_avnumberone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="assessUserInput"
            android:text="1" />

        <RadioButton
            android:id="@+id/radio_avnumbermore"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="assessUserInput"
            android:text="More than 1" />
    </RadioGroup>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:paddingLeft="24dp"
        android:text="3. Do you use pop-up/advert blockers:"
        android:textAllCaps="false" />

    <RadioGroup
        android:id="@+id/radio_adblock"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="48dp">

        <RadioButton
            android:id="@+id/radio_adblockyes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:onClick="assessUserInput"
            android:text="Yes" />

        <RadioButton
            android:id="@+id/radio_adblockno"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="assessUserInput"
            android:text="No" />
    </RadioGroup>

CSS

<label id="rad1" class="tab1">
  <input type="radio" name="tabGroup1" checked="checked"/>
</label>
<label id="rad2" class="tab2"> 
  <input type="radio" name="tabGroup1"/>
</label>

Demo

Answer 3

输入不应该符合W3C规范的伪元素，尽管有些浏览器决定实现它们。

理想情况下，您应该在label中使用实际文本，但如果您选择不使用，则无论如何都可以使用标签并将伪元素放在其上。

.tab1 + label:before {
  content: 'Yes';
  display: inline-block;
}
.tab2 +label:before {
  content: 'No';
  display: inline-block;
}

<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
<label for="rad1"></label>
<input type="radio" name="tabGroup1" id="rad2" class="tab2" />
<label for="rad2"></label>

我可以用CSS制作输入广播文本吗？

3 个答案: