Отключенные поля ввода не меняют цвет текста с помощью CSS в Jquery Mobile - PullRequest
Новая
       40

Отключенные поля ввода не меняют цвет текста с помощью CSS в Jquery Mobile

0 голосов
/ 12 октября 2019

У меня есть некоторые отключенные поля ввода текста, которые я хочу, чтобы цвет текста был черным, потому что он слишком серый.

Я знаю, что это простой однострочный код, но по какой-то причине он не будет работать. Другие свойства CSS работают, пока он отключен, например, цвет фона и прочее, но не цвет текста.

Вот CSS: 

input[type="text"]:disabled {
  color: black;
}

Вот HTML: 

<div class="form-container">

                <label for="name">Full Name:</label>
                <input id="profileName" type="text" disabled="disabled">

                <label for="email">Email ID:</label>
                <input id="profileEmail" type="text" disabled="disabled">

                <label for="address">Address Line:</label>
                <input id="profileAddress" type="text" disabled="disabled">

                <label for="city">City:</label>
                <input id="profileCity" type="text" disabled="disabled">

                <label for="postcode">Postcode:</label>
                <input id="profilePostcode" type="text" disabled="disabled">

                <label for="state">State:</label>
                <input id="profileState" type="text" disabled="disabled">
</div>

Это , как это выглядит на эмуляторе Android с API 28.

Я не уверен, почему другие свойства работают, но нецвет текста. Любые идеи?

PS это проект Cordova, и я строю его в Jquery Mobile v1.4.5

Ответы [ 2 ]

1 голос
/ 12 октября 2019

Можете ли вы использовать это. 

.form-container input:disabled{color: black}
<div class="form-container">

                <label for="name">Full Name:</label>
                <input value="XXXPPPAAPP" id="profileName" type="text" disabled="disabled">

                <label for="email">Email ID:</label>
                <input value="XXXPPPAAPP" id="profileEmail" type="text" disabled="disabled">

                <label for="address">Address Line:</label>
                <input value="XXXPPPAAPP" id="profileAddress" type="text" disabled="disabled">

                <label for="city">City:</label>
                <input value="XXXPPPAAPP" id="profileCity" type="text" disabled="disabled">

                <label for="postcode">Postcode:</label>
                <input id="profilePostcode" type="text" disabled="disabled">

                <label for="state">State:</label>
                <input id="profileState" type="text" disabled="disabled">
</div>

Надеюсь, это поможет.

1 голос
/ 12 октября 2019

Приятно ответить вам о проблеме, с которой вы столкнулись.

Поскольку вы используете Jquery Mobile. Мобильный Jquery на DOM генерирует div, охватывающий поле ввода. Так как вы также используете disabled свойство поля ввода. Итак, jquery mobile реализует class для этого div и там определен уровень opacity.

Итак, добавьте это: - 

.form-container .ui-input-text.ui-state-disabled { opacity:1; color:black; }

РабочаяСкрипка: - https://jsfiddle.net/h3Lbadgv/1/

Надеюсь, у вас все получится.

Спасибо

...