Есть ли способ, чтобы изменить одно слово цвет заполнителем

Пусть у меня есть это полеЕсть ли способ, чтобы изменить одно слово цвет заполнителем

<input type="text" placeholder="I am placeholder">

Я знаю, что с помощью CSS мы можем изменить замещающий цвет, как это, но есть ли способ изменить цвет одного слова только ,

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: pink; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
    color: pink; 
} 
:-ms-input-placeholder { /* IE 10+ */ 
    color: pink; 
} 
:-moz-placeholder { /* Firefox 18- */ 
    color: pink; 
}

Этот код изменит полный цвет заполнителя, но я хочу, чтобы изменить цвет слова placeholder только вместо этого на полной I am placeholder

источник

2016-06-08 Gaurav Aggarwal

Nope! Я не думаю, что что-то подобное существует. Вы можете использовать JS для достижения этого. –

Возможный дубликат [Как я могу создать отдельные части ввода-заполнителя?] (Http://stackoverflow.com/questions/22655493/how-can-i-style-individual-parts-of-an-input-placeholder) –

Вы можете взглянуть на mix-blend-mode:

label { 
 
    display: inline-block; 
 
    background: linear-gradient(to right, red 2.2em, blue 2.2em); 
 
    border: inset; 
 
    /* border here instead input */ 
 
    font-family: monospace; 
 
    /* less surprise about length of text at screen */ 
 
} 
 
input { 
 
    box-shadow: inset 0 0 0 2em white; 
 
    /* covers the background, needed for the blending */ 
 
} 
 
input:invalid { 
 
    /* color part of text only when placeholder is shown */ 
 
    mix-blend-mode: screen; 
 
} 
 
/* snippet disclaimer */ 
 

 
.disclaim { 
 
    mix-blend-mode: screen; 
 
} 
 
body { 
 
    background: white; 
 
}

<label> 
 
    <input placeholder="I am placeholder" required /> 
 
</label> 
 
<p class="disclaim">not avalaible yet for <span>'your browser',</span> please be patient.</p>

Иначе вы должны использовать HTML и текст:

label { 
 
    display: inline-block; 
 
} 
 
label>span { 
 
    position: absolute; 
 
    padding-left: 3px; 
 
} 
 
label>span span { 
 
    color: blue 
 
} 
 
input { 
 
    position: relative; 
 
    background: white; 
 
} 
 
input:invalid { 
 
    background: none; 
 
}

<label> 
 
    <span>I am <span>placeholder</span></span> 
 
    <input type="text" required /> 
 
</label>

источник

2016-06-08 11:42:18

Не могли бы вы немного рассказать о 'mix-blend-mode' –

@GauravAggarwal mix-blend-mode позволяет различным элементам укладки смешивать свои цвета вместе с помощью разных фильтров https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode. он позволяет смешивать темный цвет с цветами градиента под белым цветом. каждое значение имеет другой эффект. –

так что мы можем настроить размер области цвета тоже? –

Вы не можете, возможно, сделать это со стандартным заполнителем. Вместо этого сделайте div и поместите свой элемент ввода и еще один ребенок (например, span/p) внутри этого div и позицию span/p внутри вашего элемента ввода и по фокусу скройте элемент span/p.

Что-то вроде этого: link

источник

2016-06-08 10:25:18 Pushpendra

Есть ли способ, чтобы изменить одно слово цвет заполнителем

ответ

Смежные вопросы