html - 更改 Bootstrap 表单输入字体

Question

HTML:

<div class="form-group">
   <label for="email">Email Address:</label>
   <input type="email" class="form-control" id="email" placeholder="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6e736a667b676e4b6f64666a626525686466" rel="noreferrer noopener nofollow">[email protected]</a>">
</div>              

CSS:

::-webkit-input-placeholder {
    font-weight: bold;
    font-size: 17px;
}

:-ms-input-placeholder {
   font-weight: bold;
    font-size: 17px; 
}

基本上，“[email protected]”上的字体会发生变化。但是一旦我写入字段，字体就不一样了，看起来很弱。 请记住:我对编码相当陌生，如果我的代码中有错误或代码结构不好，我不会感到惊讶。

How it looks like

How it looks like after writing

Answer 1

您目前仅设置占位符的样式。当您在输入字段中输入内容时，占位符会自动替换为您的数据，这意味着您还必须设置 .input 内容的样式，而不仅仅是 placeholder正确的结果。

例如，使用以下代码:

::-webkit-input-placeholder {
  font-weight: bold;
  font-size: 17px;
}

:-ms-input-placeholder {
  font-weight: bold;
  font-size: 17px; 
}

input {
  // Styling can be put here
}