Как закрасить текст из option как placeholder?

368
19 июля 2022, 17:30

Как сделать текст вида placeholder на select как в input-ах?

чекал уже 25 вариантов все равно текст не меняется как в input-ах?

<div class="container-fluid">
            <div class="row">
      <div class = "col-2"
           </div>
        <div class = "col-8"
                            <br/>
                            <div class="form-all">
           
              <br>
                                <div class="form-input">
                                    <input class="textInput sel" type="text" placeHolder="Full Name" class=" form-textbox" data-type="input-textbox" id="fullName" name="fullname" maxlength="40" size="30" value="" required/>
                <small id="FullNameHelpText" class="form-text text-muted" style="display:none;">Enter name!</small>
                </div>
                                <div class="form-input">
                <div class="form-input">
                  <select class="form-control sel" name = "place" id = "place" >
                    <option value="">Val1</option>
                    <option value="">Val2</option>
                  </select>
                </div>
              </div>
                                <div class="form-input">
                                    <input class="textInput sel" type="text" placeHolder="Number" class=" form-textbox" data-type="input-textbox" id="phone" name="telefon" maxlength="35" size="30" value="" required/>
                  <small id="NumberHelpText" class="form-text text-muted" style="display:none;">Number!</small>
              </div>
                                <br/>
                                <button class="buton" type="button" name="step_1" size="30" onclick="ajaxrequest();"  id="sub_butt">Send</button>
                                <br><br>
                            </div>
                    </form>
</div>

код https://codepen.io/Keanu-Reeves123/pen/gOwOzGR

Answer 1

Мне кажется что вам не нужно делать цвет select-a таким же как и placeholder, потому что если в инпуте текст, который введет пользователь будет такого же цвета как и placeholder, то это будет не совсем корректно, если посмотреть cо стороны UX.

Стили можно просто переопределить в css. Таким образом можно изменить background-color селекта:

.form-input select {
    background-color: #eef2f7;
    border-color: #eef2f7;
}
READ ALSO
Активация/деактивация кнопки при пустом/заполненом инпуте

Активация/деактивация кнопки при пустом/заполненом инпуте

Сделал активацию/деактивацию кнопки при заполнении инпутаПосле каждого нажатия кнопки, поле ввода я делаю пустым, но кнопка продолжает быть...

235
не открывается календарь

не открывается календарь

Заказчик хочет нативный календарь, но проблема в том, что он просто не открывается при нажатии z-index не помог в чем может быть проблема?

334
Как проверить на JS при submit формы, что страница загружается?

Как проверить на JS при submit формы, что страница загружается?

Каким образом можно проверить, что страница в процессе загрузки после нажатия на кнопку? В моём случае documentreadyState всегда выдаёт complete

283