mirror of
https://github.com/jdan/98.css.git
synced 2025-09-25 13:08:57 +02:00
Adds silver background colour to inputs disabled type email, password, text (#110)
* Adds silver background colour to inputs type email, password, text * Add example to docs * Textarea disabled styling * Revert autoformatting * fix: text shadow, use :disabled pseudoselector
This commit is contained in:
@@ -388,7 +388,20 @@
|
|||||||
<textarea id="text${getCurrentId()}" rows="8"></textarea>
|
<textarea id="text${getCurrentId()}" rows="8"></textarea>
|
||||||
</div>
|
</div>
|
||||||
`) %>
|
`) %>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Text boxes can also be disabled and have value with their corresponding HTML attributes.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<%- example(`
|
||||||
|
<div class="field-row">
|
||||||
|
<label for="text${getNewId()}">Favorite color</label>
|
||||||
|
<input id="text${getCurrentId()}" disabled type="text" value="Windows Green"/>
|
||||||
|
</div>
|
||||||
|
`) %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="component">
|
<section class="component">
|
||||||
|
11
style.css
11
style.css
@@ -169,6 +169,10 @@ button::-moz-focus-inner {
|
|||||||
:disabled,
|
:disabled,
|
||||||
:disabled + label {
|
:disabled + label {
|
||||||
color: var(--button-shadow);
|
color: var(--button-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled,
|
||||||
|
:disabled + label {
|
||||||
text-shadow: 1px 1px 0 var(--button-highlight);
|
text-shadow: 1px 1px 0 var(--button-highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -433,6 +437,13 @@ input[type="email"] {
|
|||||||
line-height: 2;
|
line-height: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type="email"]:disabled,
|
||||||
|
input[type="password"]:disabled,
|
||||||
|
input[type="text"]:disabled,
|
||||||
|
textarea:disabled {
|
||||||
|
background-color: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
Reference in New Issue
Block a user