如何使輸入佔位符字體大小不同於輸入值字體大小

Question

我處於輸入字段所需的佔位符文本對於字段寬度太長的情況。爲了解決這個問題，我試圖給佔位符更小的font-size。似乎無論我做什麼，我都無法使佔位符文本的font-size與值文本不同。我已經嘗試過投擲!important，兩者都沒有，也沒有運氣。

我的陣營代碼：

<input 
    type="text" 
    id="inputId" 
    name="inputName" 
    placeholder="A long string of text that does not fit" 
    onChange={props.handleChange} 
    value={props.someValue} 
    className={styles.myClass} 
/> 

我的CSS：

.myClass { 
    font-size: 2em; 
    height: 66.8125px !important; 
} 

.myClass::-webkit-input-placeholder { /* WebKit browsers */ 
    font-size: 1em; 
} 

.myClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    font-size: 1em; 
} 

.myClass::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    font-size: 1em; 
} 

.myClass:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    font-size: 1em; 
} 

Answer 1

你的佔位符字體大小值是相對於含元件其的字體大小，因此1em的是隻是要的大小與字體大小的文本輸入相同：

body { 
    font-size: 20px; 
} 

.myClass { 
    font-size: 2em; /* 2em -> body font-size * 2 -> 20px * 2 = 40px */ 
    height: 66.8125px !important; 
} 

.myClass::-webkit-input-placeholder { /* WebKit browsers */ 
    font-size: 1em; /* 1em -> input font-size * 1 -> 40px * 1 = 40px */ 
} 

.myClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    font-size: 1em; 
} 

.myClass::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    font-size: 1em; 
} 

.myClass:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    font-size: 1em; 
} 

的值設置爲1的比例做的伎倆：

See fiddle

body { 
    font-size: 20px; 
} 

.myClass { 
    font-size: 2em; 
    height: 66.8125px !important; 
} 

.myClass::-webkit-input-placeholder { /* WebKit browsers */ 
    font-size: 0.5em; 
} 

.myClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    font-size: 0.5em; 
} 

.myClass::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    font-size: 0.5em; 
} 

.myClass:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    font-size: 0.5em; 
} 

Answer 2

給:placeholder-shown一試：

input { 
 
    font-size: 2em; 
 
    height: 66.8125px !important; 
 
    width: 150px; 
 
} 
 

 
input:placeholder-shown { 
 
    font-size: 1em; 
 
}

<input type="text" id="inputId" name="inputName" placeholder="A long string of text that does not fit" />

Answer 3

:placeholder僞元素實際上是輸入的子元素。

因此，1em將等於2em，因爲這是繼承的字體大小。

1EM是一樣的父字體大小

的100％，如果你想僞元素的字體大小有一半爲母公司，使用font-size:50%。