CSS для изменения метки переключателя - PullRequest
Новая
       7

CSS для изменения метки переключателя

0 голосов
/ 03 января 2019

Привет. Я пытаюсь изменить метки на переключателях в онлайн-опросе.Новичок в CSS и немного работал в последние несколько недель, но не может решить это,

Я пробовал ряд вещей (ни один не работал) с использованием контента и отображения, таких как 

#question-2 label:nth-child(5) {
content: "Y";
}

и 

label , #button-rating-2-5 {
content: "Y";
}

Ниже взято из опроса, я надеюсь, что это достаточно руководство, чтобы помочь, я могу только загрузить CSS 

<label title="4" for="button-rating-2-5">
    4
    <input id="button-rating-2-5" type="radio" name="question-2" value="5" style="">
</label>

Просто попробовал следующее, и этовставляет «y» в метку 

#question-2 label:nth-child(5):before {
content: "Y";
font-size: 14px; 
}

Однако, если я использую любое из следующего, кнопка «И» удаляется не только меткой. 

#question-2 .answer-container{ 
font-size: 0; 
}

#question-2 Label{ 
font-size: 0; 
}

#question-2 label:nth-child(5) {
font-size: 0;
}

Другими словами, я простохочу изменить значение по умолчанию "4", чтобы показать "Y" по этому вопросу.Ценю любую помощь.Благодарю.

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Вы можете установить опцию visibility для элементов.Пример ниже: 

/* You can use label[for="button-rating-2-5"]{} selector too */
label[title="4"] {
  visibility: hidden;
  font-size: 0 /* no space between :before and input */
}

label[title="4"]:before {
  content: "Y";
  visibility: visible;
  font-size: 14pt /* add new font-size for Y */
}

label[title="4"]>input {
  visibility: visible /* child element input's visibility */
}
<label title="4" for="button-rating-2-5">
    4
    <input id="button-rating-2-5" type="radio" name="question-2" value="5" style="">
</label>
0 голосов
/ 03 января 2019

Попробуйте это ... 

#changeLabel{ font-size: 0; }
#changeLabel:before { content: "Y"; font-size: 14px; }
<label title="4" for="button-rating-2-5" id="changeLabel">
    4
    <input id="button-rating-2-5" type="radio" name="question-2" value="5" style="">
</label>
...