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

Я пробовал несколько разных вещей, и я не могу понять, как изменить непрозрачность заполнителя без включения непрозрачности для ввода текста.

Вот код:

<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) в вашем случае

— 12.06.2018 18:12

[У вас уже есть этот вопрос, проверьте здесь ->] stackoverflow.com/questions/18721382/…

— 12.06.2018 18:14

Спасибо за вклад, ребята, получил ответ.

— 12.06.2018 18:17

html twitter-bootstrap css bootstrap-4

12.06.2018 18:08

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 539

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

12.06.2018 18:16

Ответ принят как подходящий

Вот возможное решение с некоторыми запасными вариантами

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!

— 12.06.2018 19:48

12.06.2018 18:21