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

尝试git push -f：

:placeholder-shown

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

Answer 3

:placeholder伪元素实际上是输入的子元素。

因此，1em将等于2em，因为这是继承的字体大小。

1em与父字体大小的100％相同

如果您希望伪元素的字体大小为父元素的一半，请使用font-size:50%。

如何使输入占位符字体大小与输入值font-size不同

3 个答案: