有什麼辦法來改變佔位符的一個字顏色

假設我有這樣的文本字段有什麼辦法來改變佔位符的一個字顏色

<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

都能跟得上！我不認爲這樣的事情存在。你可能想用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

請您簡要介紹一下'混合 - 共混 - mode' –

@GauravAggarwal混合，混合模式允許不同的堆疊元素的顏色通過不同的過濾器https://developer.mozilla.org/en-US/docs混合在一起/ Web/CSS /混合混合模式。它允許在這裏混合黑暗與白色沒有下面的漸變色混合。每個值都有不同的效果。 –

那麼我們也可以調整顏色區域的大小嗎？ –

你不可能與標準佔位做到這一點。相反，做一個div並把你的輸入元素和多生一個孩子（比如span/p元素）這個div和位置span/p裏面你輸入元素內和焦點隱藏span/p元素。

事情是這樣的：link

來源

2016-06-08 10:25:18 Pushpendra

有什麼辦法來改變佔位符的一個字顏色

回答

相關問題