Изменить заполнитель ввода * только цвет

У меня есть несколько полей ввода, некоторые поля - required, а обязательное поле упоминается с помощью *, поэтому мне нужно изменить только цвет заполнителя ввода *, не менять весь цвет заполнителя, проверьте изображение ниже, что мне точно нужно.

Я пробовал приведенный ниже код для достижения этой цели, но он может изменить весь цвет заполнителя

div {
  margin:10px 0px;
}
input {
  width: 200px;
  border: none;
  border-bottom: solid 1px #8d97a0;
  padding: 5px;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
::-webkit-input-placeholder {
  color:red;
}

<div>
  <input type="name" name="name" id="name" placeholder="Name *">
</div>
<div>
  <input type="Email" name="email" id="email" placeholder="Email">
</div>
<div>
  <input type="phone" name="phone" id="phone" placeholder="Phone">
</div>
<div>
  <input type="password" name="password" id="password" placeholder="Password *">
</div>

Ezzuddin 31.10.2017 источник

Ответы (6)

arrow_upward
1
arrow_downward

Просто placeholder не будет давать разные styles. Если вам нужен другой стиль, вам нужно разделить его вот так.

input {
    width: auto;
}

input + label {
    color: #999;
    font-family: Arial;
    font-size: .8em;
    position: relative;
    left: -166px; 
}

input[required] + label:after {
    content:'*';
    color: red;
}


input[required]:invalid + label {
    display: inline-block;
}

input[required]:valid + label{
    display: none;
}

<div>
  <input type="text" id="name" name="name" required="required" />
  <label for="name">Password</label>
</div>

Bharath Kumar 31.10.2017

comment

Я уже пробовал это, но мне не нужно использовать ярлык и требовать ввода - Ezzuddin; 31.10.2017

arrow_upward
1
arrow_downward

Проверьте это ... Вы можете выполнить свое требование, используя :before and :after, а для входного тега нет поддержки :before and :after. Таким образом, вы можете сделать это, добавив метку к своему вводу и предоставив :before and :after CSS для метки

input {
    width: 160px;
}

input[required] + label {
    color: #999;
    font-family: Arial;
    font-size: .8em;
    position: relative;
    left: -166px; /* the negative of the input width */
}


input[required] + label:after {
    content:'*';
    color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
    display: inline-block;
}

/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
    display: none;
}

<input type="password" id="name" name="name" required="required" />
    <label for="name">Password</label>

Sagar Kodte 31.10.2017

comment

Я тоже пробовал это, но мне не нужно использовать label и required во вводе - Ezzuddin; 31.10.2017

comment

Рассмотрите возможность указания курсора с вертикальной полосой для этой метки, чтобы соответствовать тому, что пользователи видят и ожидают от наведения курсора на поле ввода. - Eugene Ryabtsev; 31.10.2017

arrow_upward
1
arrow_downward

Попробуй это:

label {
  display: inline-block;
  width:100%;
  background: linear-gradient(to right, #999 6em, red 5em);
  border: 2px solid #ccc;
  font-family: monospace;/* less surprise about length of text at screen */
}
input {
  font-weight: bold;
  width: 100%;
  height:20px;
  padding:10px;
  border: none;
  display: block;
outline:none;

}
input:invalid {/* color part of text only when placeholder is shown */
  mix-blend-mode: screen;
}

<label>
  <input placeholder="Password *" required />
</label>

Hrishabh Singh 31.10.2017

arrow_upward
1
arrow_downward

См. это:

$(document).ready(function(){

    $('.colorHolder').click(function(){
        $('.havePlace',this).focus();
    })
    
    $('.havePlace').on('input',function(){
        var len = ($(this).val()).length;
        if (len)
            $(this).next('label').hide();
        else
            $(this).next('label').show();
    })
    
})

input {
    width: 150px;
    border: none;
    border-bottom: solid 1px #8d97a0;
    padding: 5px;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    outline: none;
}

.colorHolder {
    position: relative;
    margin-bottom: 20px;
    display:inline-block;
}

.colorHolder .havePlace + label {
    position: absolute;
    left: 7px;
    bottom: 2px;
    color: #CCC;
    cursor: text;
}

.colorHolder .havePlace + label:after {
    content: '*';
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  

<div  class="colorHolder">
    <input type="password" name="password" class="havePlace">
    <label>Password </label>
</div>

<div  class="colorHolder">
    <input type="email" name="email" class="havePlace">
    <label>Email </label>
</div>

<div  class="colorHolder">
    <input type="text" name="text" class="havePlace">
    <label>Text </label>
</div>

Ehsan 31.10.2017

comment

Нужно все * завершается не в старте. Мне нужно именно то изображение, которое я загрузил, вы изменили интерфейс - Ezzuddin; 31.10.2017

arrow_upward
0
arrow_downward

возможно, вы можете использовать span в заполнителе, чтобы вы могли изменить цвет *

$(function() {
    $(".holder + input").keyup(function() {
        if($(this).val().length) {
            $(this).prev('.holder').hide();
        } else {
            $(this).prev('.holder').show();
        }
    });
    $(".holder").click(function() {
        $(this).next().focus();
    });
});

.holder {
position: absolute;
margin: 5px 5px;
cursor: auto;
font-size: 11pt;
z-index: 1;
}
.red{
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">Email Adress <span class="red">*</span></div>
<input id="input" size="18" type="text" />

кредиты: Добавить диапазон внутри заполнителя формы

dennisgon 31.10.2017

arrow_upward
0
arrow_downward

Я не думаю, что с текущей разметкой это возможно только с помощью CSS, но:

Это возможно, если можно добавить элемент label после ввода, например так:

<div>
  <input type="password" name="password" id="password" placeholder=" " />
  <label for="password">Password</label>
</div>

Демонстрация Codepen

Уловка здесь заключается в использовании псевдокласса:

: показано местозаполнителем (caniuse)

Из спецификации:

В элементах ввода иногда может отображаться текст-заполнитель в качестве подсказки пользователю о том, что вводить. См., Например, атрибут placeholder в [HTML5]. Псевдокласс : placeholder-shown соответствует элементу ввода, который показывает такой текст-заполнитель.

Идея состоит в том, чтобы текст «Пароль *» имитировал текст-заполнитель.

Заполнители всегда отображаются на input элементах - даже если они сфокусированы - если для них не установлено значение.

Используя псевдокласс :placeholder-shown на input, мы можем определить, когда отображать текст метки.

Это ключевой селектор:

input:placeholder-shown + label {
  display: block;
}

Это означает: когда отображается заполнитель ввода - показывать метку "заполнитель". (иначе мы это скрываем)

По этой причине нам все еще нужно установить непустой атрибут заполнителя на входе (достаточно простого пробела)

div {
  position: relative;
}
label {
  position: absolute;
  height: 20px;
  left: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
  display: none;
  pointer-events: none;
  color: #757575;
  font-size: 16px;
  font-family: system-ui;
}
label:after {
  content: " *";
  color: red;
}
input:placeholder-shown + label {
  display: block;
}
input {
  width: 200px;
  border: none;
  border-bottom: solid 1px #8d97a0;
  padding: 5px;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  height: 20px;
  font-size: 16px;
  margin: 5px 0;
}

<div>
  <input type="password" name="name" id="name" placeholder=" " />
  <label for="name">Name</label>
</div>

<div>
  <input type="password" name="name" id="name" placeholder="Email" />
</div>

<div>
  <input type="password" name="name" id="name" placeholder="Phone" />
</div>

<div>
  <input type="password" name="password" id="password" placeholder=" " />
  <label for="name">Password</label>
</div>

Демонстрация Codepen

Danield 31.10.2017

comment

Спасибо за ответ, но я не могу его использовать. У меня несколько полей, и все поля не required[*] - Ezzuddin; 31.10.2017

comment

Это не имеет ничего общего с обязательным, вопрос только в том, можно ли добавить дополнительный элемент после ввода - Danield; 31.10.2017

comment

Спасибо! но заполнитель и метка не выглядят одинаково замените телефон на пароль, тогда вы поймете, о чем я, поэтому можете проверить это. - Ezzuddin; 31.10.2017

comment

Я попытался изменить font-size местозаполнитель и метку, но все не то же самое - Ezzuddin; 31.10.2017

Изменить заполнитель ввода * только цвет

Ответы (6)

Демонстрация Codepen

: показано местозаполнителем (caniuse)

Демонстрация Codepen

Похожие вопросы