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

【问题标题】：Changing Form Field Opacity in Bootstrap在 Bootstrap 中更改表单字段的不透明度
【发布时间】：2018-11-22 02:39:49
【问题描述】：

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

代码如下：

<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 不透明度。

这可能吗？

【问题讨论】：

在您的情况下尝试将背景更改为 rgba 颜色 (256,256,256,0.5)
[你已经有这个问题了，看这里 -->] stackoverflow.com/questions/18721382/…
感谢各位大侠的指点，得到了答案。

标签： html twitter-bootstrap css bootstrap-4

【解决方案1】：

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

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;
}

【讨论】：

非常感谢@Gurgen 的帮助！

【解决方案2】：

你也许想试试这个，让我知道它是否有效？

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

【讨论】：