CSS селектор для текста внутри метки и использования до и после - PullRequest
Новая
       1

CSS селектор для текста внутри метки и использования до и после

0 голосов
/ 06 ноября 2018

Это мой первый вопрос, поэтому я надеюсь, что задаю его правильно.

Мэтью Кейн создал отличный пример необычной радиокнопки с использованием html и css, которую можно увидеть по адресу https://www.templatemonster.com/blog/style-checkboxes-radio-buttons-css/.. В ней он использует этот код: 

body {
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
}

#first {
  background-color: #4B4D65;
}

#second {
  background-color: #FF8A66;
}

.section {
  padding: 100px;
  padding-left: 150px;
}

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}

.container {
  margin-bottom: 10px;
}

.container label {
  position: relative;
}


/* Base styles for spans */
.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Radio buttons */
.container span.radio:hover {
  cursor: pointer;
}

.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}

.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}

input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Tea</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Cappuccino</span></label>
    </div>
</section>

Когда я отлаживаю его в Chrome, я вижу 

<span class="radio"> == $0
 ::before
 "Coffee"
 ::after
</span"

Вот мой HTML: 

<body class="my_PageBg" data-usepopupcontrols="no">
<div class="my_DesktopContainer my_temp_unselect" style="display: none;">
<div tabindex="1" class="container" 
id="radio1" style="transform-origin: center 50%; left: 20px; top: 40px;     width: 660px; height: 100px; 
overflow: auto; position: absolute; z-index: 1; direction: ltr; transform:         inherit; transform-style: preserve-3d;" 
contenteditable="false">
<tbody>
<tr>
<td style="padding: 0px; white-space: nowrap;">
<label style="cursor: default;" onkeydown="onTreeLabelKeyDown(event)"     for="radio10" name="radio1">
<input name="radio1" tabindex="1" id="radio10"     onclick='OnResetDownChainControls("radio1",event)' type="radio" checked=""     value="Value1"/>
Val1
</label>
</td>
</tr>
<tr>
<td style="padding: 0px; white-space: nowrap;">
<label style="cursor: default;" onkeydown="onTreeLabelKeyDown(event)"     for="radio11" name="radio1">
<input name="radio1" tabindex="1" id="radio11"     onclick='OnResetDownChainControls("radio1",event)' type="radio" value="Value2"/>
Val2
</label>
</td>
</tr>
<tr>
<td style="padding: 0px; white-space: nowrap;"><label style="cursor:     default;" onkeydown="onTreeLabelKeyDown(event)" for="radio12" name="radio1">
<input name="radio1" tabindex="1" id="radio12"     onclick='OnResetDownChainControls("radio1",event)' type="radio" value="Value3"/>
    Val3
</label>
</td>
</tr>
</tbody>

Я пытаюсь сделать то же самое с текстом "Val1", "Val2" и т. Д.

Обратите внимание, что я не могу изменить html, так как он исходит от внешнего вызова.

Какой селектор CSS я могу использовать?

1 Ответ

0 голосов
/ 07 ноября 2018

:: after и :: before псевдоэлементы не применяются к replace-elements или void-elements .

Но вы можете использовать <span> для достижения желаемого эффекта. Пример: 

.my-special-class:before {
  content: '[before] ';
}
.my-special-class:after {
  content: ' [after]';
}
.my-special-class:before,
.my-special-class:after {
  color: red;
}
<span class="my-special-class">Val 1</span>

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

Примечание: , если вы хотите использовать псевдоэлементы в качестве графики (чтобы дать им размер, position, background-image, border, background и т. Д. - без фактического content ) вы должны по-прежнему указывать content: '' (пустая строка). Без установки content псевдоэлемент не будет отображаться независимо от display, visibility или opacity.
Большинство атрибутов CSS, которые можно применить к обычному элементу DOM, можно применить к псевдоэлементам .

<label> s могут иметь псевдо, но это будет означать, что :before помещается перед <input>, который включен в <label>. Если вы хотите поместить :before после <input> (который не может иметь псевдо), вы должны обернуть текстовый узел в <span>, как в примере.

Также обратите внимание, что, хотя спецификация официально определяет псевдоэлементы с двойной двоеточием (::pseudo-element), все браузеры, поддерживающие двоеточие, также поддерживают устаревшую нотацию с двоеточием, в то время как несколько старых версий (IE pre v9, FF) pre v1.5, Opera pre v7) поддерживает только запись с одним двоеточием. По этой причине большинство людей используют одинарную запись в двоеточии (что официально неправильно, но технически правильно, по крайней мере, на данный момент).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...