it-swarm.com.ru

: not (: empty) Селектор CSS не работает?

У меня чертовски много времени с этим конкретным селектором CSS, который не хочет работать, когда я добавляю :not(:empty) к нему. Кажется, что он отлично работает с любой комбинацией других селекторов:

input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none }

Если я удалю часть :not(:empty), она будет работать нормально. Даже если я поменяю селектор на input:not(:empty), он все равно не выберет поля ввода, в которые введен текст. Это не работает или мне просто не разрешено использовать :empty в селекторе :not()?

Единственное, о чем я могу думать, это то, что браузеры все еще говорят, что элемент пуст, потому что у него нет дочерних элементов, просто «значение» на слово. Разве селектор :empty не имеет отдельной функциональности для элемента ввода по сравнению с обычным элементом? Хотя это не представляется вероятным, поскольку использование :empty в поле и ввод чего-либо в него приведет к исчезновению альтернативных эффектов (поскольку оно больше не пусто).

Протестировано в Firefox 8 и Chrome.

78
animuson

Будучи элементом void , элемент <input> считается пустым по определению HTML "empty", поскольку модель содержимого всех пустых элементов всегда пуста. Таким образом, они всегда будут соответствовать псевдоклассу :empty, независимо от того, имеют ли они значение. Именно поэтому их значение представлено атрибутом в начальном теге, а не текстовым содержимым в начальном и конечном тегах.

Кроме того, из Спецификация селекторов :

Псевдокласс :empty представляет элемент, который вообще не имеет дочерних элементов. С точки зрения дерева документа, только узлы элементов и узлы контента (такие как текстовые узлы DOM, узлы CDATA и ссылки на сущности), чьи данные имеют ненулевую длину, должны рассматриваться как влияющие на пустоту;

Следовательно, input:not(:empty) никогда не будет соответствовать чему-либо в надлежащем HTML-документе. (Он все равно будет работать в гипотетическом документе XML, который определяет элемент <input>, который может принимать текстовые или дочерние элементы.)

Я не думаю, что вы можете стилизовать пустые поля <input> динамически, используя только CSS (то есть правила, которые применяются всякий раз, когда поле пустое и не вводится после ввода текста). Вы можете выбрать изначально пустые поля, если они имеют пустой атрибут value (input[value=""]) или вообще не имеют атрибута (input:not([value])), но это все.

130
BoltClock

Это возможно с помощью встроенного JavaScript onkeyup="this.setAttribute('value', this.value);" & input:not([value=""]):not(:focus):invalid 

Демо: http://jsfiddle.net/mhsyfvv9/

input:not([value=""]):not(:focus):invalid{
  background-color: tomato;
}
<input 
  type="email" 
  value="" 
  placeholder="valid mail" 
  onkeyup="this.setAttribute('value', this.value);" />

34
Mo.

Вы можете попробовать использовать: placeholder-показ ...

input {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 5px;
  border: 2px solid lightblue;
  outline: 0;
  font-weight:bold;
  transition: border-color 200ms;
  font-family: sans-serif;
}

.validation {
  opacity: 0;
  font-size: 12px;
  font-family: sans-serif;
  color: crimson;
  transition: opacity;
}

input:required:valid {
  border-color: forestgreen;
}

input:required:invalid:not(:placeholder-shown) {
  border-color: crimson;
}

input:required:invalid:not(:placeholder-shown) + .validation {
  opacity: 1;
}

  
<input type="email" placeholder="e-mail" required>
<div class="validation">Not valid</span>

нет большой поддержки, хотя ... caniuse

25
Gijs Erenstein

.floating-label-input {
  position: relative;
  height:60px;
}
.floating-label-input input {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
  border: 0 none;
  outline: none;
  vertical-align: middle;
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
}
.floating-label-input label {
  position: absolute;
  top: calc(50% - 5px);
  font-size: 22px;
  left: 0;
  color: #000;
  transition: all 0.3s;
}
.floating-label-input input:focus ~ label, .floating-label-input input:focus ~ label, .floating-label-input input:valid ~ label {
  top: 0;
  font-size: 15px;
  color: #33bb55;
}
.floating-label-input .line {
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  background: #000;
  left: 0;
}
.floating-label-input .line:after {
  content: "";
  display: block;
  width: 0;
  background: #33bb55;
  height: 1px;
  transition: all 0.5s;
}
.floating-label-input input:focus ~ .line:after, .floating-label-input input:focus ~ .line:after, .floating-label-input input:valid ~ .line:after {
  width: 100%;
}
<div class="floating-label-input">
      <input type="text" id="id" required/>
      <label for="id" >User ID</label>
      <span class="line"></span>
</div>

7
Amit

Вы можете подойти к этому по-другому; пропустите использование псевдокласса :empty и используйте события input, чтобы обнаружить значимое значение в поле <input> и соответствующим образом оформить его:

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  input.addEventListener('input', function() {
    var bg = this.value ? 'green' : 'red';
    this.style.backgroundColor = bg;
  });
}
body {
  padding: 40px;
}
#inputList li {
  list-style-type: none;
  padding-bottom: 1.5em;
}
#inputList li input,
#inputList li label {
  float: left;
  width: 10em;
}
#inputList li input {
  color: white;
  background-color: red;
}
#inputList li label {
  text-align: right;
  padding-right: 1em;
}
<ul id="inputList">
  <li>
    <label for="username">Enter User Name:</label>
    <input type="text" id="username" />
  </li>
  <li>
    <label for="password">Enter Password:</label>
    <input type="password" id="password" />
  </li>
</ul>

Связанные с


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

7
Eliran Malka

чистый раствор css

input::-webkit-input-placeholder {
    opacity: 1;
    -webkit-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* Chrome <=56, Safari < 10 */
input:-moz-placeholder {
    opacity: 1;
    -moz-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* FF 4-18 */
input::-moz-placeholder {
    opacity: 1;
    -moz-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* FF 19-51 */
input:-ms-input-placeholder {
    opacity: 1;
    -ms-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* IE 10+ */
input::placeholder {
    opacity: 1;
    transition: opacity 0s;
    text-align: right;
}
/* Modern Browsers */

*:focus::-webkit-input-placeholder {
   opacity: 0;
   text-align: left;
}
/* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder {
    opacity: 0;
    text-align: left;
}
/* FF 4-18 */
*:focus::-moz-placeholder {
    opacity: 0;
    text-align: left;
}
/* FF 19-50 */
*:focus:-ms-input-placeholder {
    opacity: 0;
    text-align: left;
}
/* IE 10+ */
*:focus::placeholder {
    opacity: 0;
    text-align: left;
}
/* Modern Browsers */

input:focus {
    text-align: left;
}
0
star