Изменение непрозрачности поля формы в Bootstrap

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, но сделать ввод текста обычным.Я попытался поместить тег стиля после атрибута placeholder, но все, что делает его непрозрачным для входного текста, также непрозрачность 0,5.

Возможно ли это?

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

Answer 2

Возможно, вы захотите попробовать это и дайте мне знать, если это работает?

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