This question already has answers here:
Style disabled button with CSS
(11 answers)
Closed 3 years ago.
I have form that I would like the save button to be disabled with different color. It is disabled since I cannot click on it, but I would like the color to be changed as well until all fields are completed.
Currently the color is blue, when it is disabled and enabled. But I would like it to change based on condition.
<div class="medium-6 columns" *ngIf="!isLoading else updateLoading">
<button md-button class="saves" type="submit" (click)="onSave()"
[disabled]="!editCardForm.valid">Save</button>
</div>
.saves {
height: 2.375rem;
width: 5.375rem;
border-radius: 1.1563rem;
color: white;
background-color: #00B8E6;
margin-left: 0.2rem;
}
You can do this with form validation if your fields are inside a form for example. Here is a quick demo of how that can be achieved.
form:valid .button {
background : green;
}
<form>
<label for="username"><b>Username:</b></label>
<input id="username" type="text" placeholder="Username" required/><br/>
<label for="password"><b>Password:</b></label>
<input id="password" type="password" placeholder="Password" required/><br/>
<input class="button" type="submit" value="Login"/><br/>
</form>
The button will only get green, if the inputs have text, as required.
I had to put the button.
button.saves:disabled {
background-color: green;
}
Related
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
CSS "and" and "or"
(9 answers)
Closed 2 years ago.
I have two forms, one that contains a form field for entering a username and a second form on another page where a user enters an email address:
<!-- user.html -->
<form action="/account/login/" method="post">
<div class="form-group mt-3">
<input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" placeholder="Username" class="form-control form-control-md" required id="id_username">
</div>
<p class="mt-4"><input type="submit" class="btn btn-block btn-primary" value="Login"></p>
</form>
<!-- email.html -->
<form action="." method="post">
<div class="form-group">
<input type="email" name="email" autocomplete="email" maxlength="254" placeholder="Email" class="form-control form-control-md" required id="id_email">
</div>
<input type="submit" value="Send Email" class="btn btn-primary btn-block">
</form>
I'm trying to style both input controls using multiple attribute selectors like this but it's not working. The styles aren't being applied.
// styles.scss
form input[type=text][type=email] {
background-color: #f0f0f0;
}
But if I separate the types into two separate rules like this, the styles do get applied properly.
form input[type=text] {
background-color: #f0f0f0;
}
form input[type=email] {
background-color: #f0f0f0;
}
The CSS documentation says this should work. What am I doing wrong?
As per the documentation this matches when type=email AND type=text which can't be true.
Here, the selector matches all SPAN elements whose "hello" attribute
has exactly the value "Cleveland" and whose "goodbye" attribute has
exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
You would need to include both versions;
form input[type=text],
form input[type=email] {
background-color: #f0f0f0;
}
Add a comma after input with the type of text.
I have an Angular 5 component that is basically just a label and input
<div class="form-group">
<label for="wwid">WWID</label>
<input id="wwid" required ...lots of attrs...>
</div>
Using CSS I've then defined a style:
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
When the field is blank, I'm getting two red borders. The one on the input field that I want, but also one to the right of the label that I do not want. How do I get rid of the red line on the label?
Here's the actual full HTML that used by the component.
<ng-template #listSelectionFormatter let-r="result">
<span>{{r.wwid}} - {{r.fullName}}</span>
</ng-template>
<div class="form-group">
<label *ngIf="labelText" for="wwid">
{{ labelText }}
<span *ngIf="isRequired"> <sup class="requiredIndicator">*</sup></span>
</label>
<!-- inputFormatter is the format for what is placed into the input field after choosing from the dropdown -->
<input id="wwid" type="text"
class="form-control"
placeholder="Search by WWID, IDSID, Name or Email"
(selectItem)="onWorkerSelected($event.item)"
(input)="onTextFieldChanged($event.target.value)"
[ngModel]="selectedWorker"
[ngbTypeahead]="search"
[inputFormatter]="selectedResultsFormatter"
[resultTemplate]="listSelectionFormatter"
[disabled]="disabled"
[required]="required"
/>
<span *ngIf="searching">searching…</span>
<div class="invalid-feedback" *ngIf="searchFailed">Lookup failed.</div>
</div>
The requiredIndicator thing is just for an older style I was using to show an asterisk if it was required, and used this CSS:
.requiredIndicator {
color: red;
font-size: larger;
vertical-align: baseline;
position: relative;
top: -0.1em;
}
I would like to have 2 radio buttons with the default option being a standard radio button with a text label, and the second option having an input field as the label. Without using javascript I wish to have the second radio be selected if the input field receives focus.
The html looks like the following:
<form method="post" action="/">
<div class="some_style">
<input type="radio" name="n1" value="v1" id="radio_1" checked="checked"/>
<label for="radio_1">Option 1</label>
</div>
<div class="some_style">
<input type="radio" name="n2" value="v2" id="radio_2"/>
<label for="radio_2">
<input name="n3" value="v3"/>
</label>
</div>
</form>
The label will not work like this because the text input receives the focus on click.
So, without javascript you will not be able to achieve what you want I fear.
One trick: You could position the label above the input text and hide it if the checkbox is checked.
But: You will then have to click twice to give the text input the focus. To make this reasonable to the user, you eg. could hide the border if the checkbox is unchecked and show it if checked.
#mylabel {
display: block;
#background-color: red;
position: relative;
width: 200px;
height: 2em;
left: 2em;
top: -2em
}
#radio_2:checked~#mylabel {
display: none;
}
#radio_2:not(:checked)~#n3 {
border: none;
}
label {
cursor: pointer;
}
<form method="post" action="/">
<div class="some_style">
<input type="radio" name="n1" value="v1" id="radio_1" checked="checked" />
<label for="radio_1">Option 1</label>
</div>
<div class="some_style">
<input type="radio" name="n1" value="v2" id="radio_2" />
<input name="n3" value="v3" id="n3" />
<label for="radio_2" id="mylabel"></label>
</div>
</form>
I'm trying to style the key icon that appears in the password field on Safari below:
I'm trying the following:
input::-webkit-credentials-auto-fill-button {
color: white;
}
<input type="password" class="form-control form-control-lg" name="password" ngModel required placeholder="password">
but that's not working. Any idea why?
The unintuitive thing about styling these elements is that you need to use background-color:
input::-webkit-credentials-auto-fill-button {
background-color: white;
}
There is already an answer for the similar -webkit-contacts-auto-fill-button element here:
Safari - Webkit contacts autofill button icon change color on empty
Is it possible in an HTML form to mark several input elements as readonly or disabled by wrapping them with something?
I know you can set the form itself as disabled for example, but that of course disabled the whole form. I'm thinking something like:
<form>
<input name="not-readonly">
<div readonly="readonly">
<input name="readonly-field-1">
<input name="readonly-field-2">
</div>
<input type="submit">
</form>
Or could this be solved with CSS somehow? Or maybe only with Javascript?
Just found out that you can disable a group of form elements using the fieldset tag. However, it seems to be slightly buggy in certain versions of IE. There also is no support for the readonly attribute, which unfortunately was the one I needed in this case... maybe it'll be added later?
<form>
<input name="not-disabled">
<fieldset disabled>
<input name="disabled-field-1">
<input name="disabled-field-2">
</fieldset>
<input type="submit">
</form>
I'm assuming you know how to disable inputs in the regular way based on the fact that you have 34k rep.
<input disabled="disabled" type="text" name="something"/>
Easily done with jquery of course (example based on your markup)
$('div[readonly="readonly"]').find('input').attr('disabled','disabled');
You can't actually disable an input with css, but you can fake a disabled input with css like:
.fakeinput {
padding: 4px;
font-family: monospace;
font-size: .8em;
color: #aaa;
border: #999 1px solid;
background: fff;
border-radius: 1px;
margin: 5px 0;
box-shadow: inset 1px 1px 2px #ddd;
}
<p class="fakeinput">Pretend Value</p>
javascript
document.getElementById("myText").disabled = true;
CSS
<INPUT NAME="realname" VALUE="Hi There" readonly>
<INPUT NAME="realname" VALUE="Hi There" disabled>