Предотвратить обязательное заполнение полей звездочками - PullRequest
Новая
       35

Предотвратить обязательное заполнение полей звездочками

0 голосов
/ 28 мая 2018

У меня есть следующая простая форма с меткой и полем: 

<form>
  <label for="field" class="required">
    Field label which wraps:
  </label>
  <input type="text" id="field">
</form>

И следующий css: 

form {
  border: 1px solid lightgray;
  padding: 1em;
  width: 10em;
}

label, input {
  display: block;
  width: 100%;
}

label.required:after {
  color: red;
  content: " *";
}

Это делает звездочку (*) переносом на новую строку,Как я могу предотвратить это, сохраняя при этом возможность наклеивать ярлыки на слова, как обычно?Это означает, что если я добавлю более длинное описание поля в метку, оно должно охватывать 2-3 строки, если это необходимо.

См. Пример: enter image description here https://codepen.io/Yonder/pen/aKopww

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

mfluehr дал мне идею для решения.Оборачивая весь текст с интервалом - и ставя '*' в конце, используя абсолютную позицию, он никогда не обернется. 

<form>
  <label for="field" class="required">
    <span class="text-wrapper">Field label which wraps:</span>
  </label>
  <input type="text" id="field">
</form>

<br/>

<form>
  <label for="field" class="required">
    <span class="text-wrapper">Field label which wraps over multiple 
    lines:</span>
  </label>
  <input type="text" id="field">
</form>

CSS 

form {
  border: 1px solid lightgray;
  padding: 1em;
  width: 10em;
}

label, input {
  display: block;
  width: 100%;
}

label.required .text-wrapper {
  position: relative;
}

label.required .text-wrapper:after {
  position: absolute;
  right: -.7em;
  bottom: 0;
  color: red;
  content: " *";
}
0 голосов
/ 30 мая 2018

К сожалению, единственный способ сделать это - поместить окончательное слово каждой метки в отдельный контейнер. 

form {
  border: 1px solid lightgray;
  padding: 1em;
  width: 10em;
}

label, input {
  display: block;
  width: 100%;
}

label span {
  white-space: nowrap;
}

label.required span:after {
  color: red;
  content: "\00a0*";
}
<form>
  <label for="field" class="required">
    Field label which <span>wraps:</span>
  </label>
  <input type="text" id="field">
</form>

<br/>

<form>
  <label for="field" class="required">
    Field label which wraps over multiple <span>lines:</span>
  </label>
  <input type="text" id="field">
</form>
...