如何使输入占位符font-size与输入值font-size不同

Question

我所处的情况是，输入字段所需的占位符文本对于字段的宽度来说太长了。为了解决这个问题，我尝试给占位符一个更小的font-size。似乎无论我做什么，我都不能使占位符文本的font-size与值文本不同。我试过在一个上运行!important，两个都试过，但都没有成功。

我的React代码：

<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

您的占位符font-size值与其包含元素的font-size值相关，因此1em将与文本输入的font-size大小相同：

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