如何使输入占位符字体大小不同于输入值字体大小

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%。