Question

我尝试了一些不同的东西，我似乎无法弄清楚如何在不包含文本输入的不透明度的情况下更改占位符的不透明度。

以下是代码：

<label for="CI_company-organization-input" class="col-lg-10 col-form-label" style="margin-top: 5px;" required>Company/Organization</label>
	  <div class="col-lg-8">
	    <input class="form-control" type="text" id="CI_company-organization-input" placeholder="Ex: GreyBar">
	  </div>

我想将占位符的不透明度设为0.5，但要使文本输入为正常不透明度。我已经尝试在占位符属性之后放置一个样式标记，但所有这些都使得输入文本的不透明度也为0.5不透明度。

这可能吗？

Answer 1

你可能想尝试一下，让我知道它是否有效？

input.form-control::placeholder {
    opacity: .5;
}

Answer 2

这是一个可能的解决方案，带有一些后备

https://codepen.io/gurgen/full/Kemeyv

<label for="CI_company-organization-input" class="col-lg-10 col-form-label" style="margin-top: 5px;" required>Company/Organization</label>
<div class="col-lg-8">
    <input class="form-control" type="text" id="CI_company-organization-input" placeholder="Ex: GreyBar">
</div>

这是CSS

input.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: red;
    opacity: .5; /* Firefox */
}

input.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
    opacity: .5;
}
input.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
    opacity: .5;
}

在Bootstrap中更改表单字段不透明度

2 个答案: