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
Related
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;
}
I'm trying to set a monospace font to an input, but when autofill kicks in, and switching between autofill dropdown menu options, the font family within that autofill state of the text input doesn't appear as the specified monospace font, please refer to this code and change font family to monospace to portray my issue(I'm using Chrome btw):
Codepen example by CSS tricks
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
/* PRESENTATIONAL STYLES */
body {
background: #333;
color: #fff;
display: flex;
font-family: monospace;
font-size: 3em;
justify-content: center;
}
form {
padding: 50px 0;
width: 50%;
}
<form>
<div class="form-group">
<label for="exampleInputFirst">First Name</label>
<input type="text" class="form-control input-lg" id="exampleInputFirst">
</div>
<div class="form-group">
<label for="exampleInputLast">Last Name</label>
<input type="text" class="form-control input-lg" id="exampleInputLast">
</div>
<div class="form-group">
<label for="exampleInputEmail">Email Address</label>
<input type="email" class="form-control input-lg" id="exampleInputEmail">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
The solution here is input:-webkit-autofill::first-line selector.
It allows you to override default system font (and font size) during mouseover on autocomplete elements.
Here is my partial answer in hopes of helping:
I am having the same problem in Chrome, where I would like to change the font-family inside the input text area on hover of the auto-fill options, but it seems like it's the one thing that won't change.
From my experimenting with changing the autocomplete styles in WebKit, as described in the CSS tricks tutorial and in your code snippet, I can change the border styles, the box-shadow styles, even the font-weight and font-style.
Because I am able to change the other properties of the font inside the text input area on hover, but not the font-family, I'm led to believe that this is either intentional or a bug by Chrome. I also noticed the example on CSS tricks behaves the same way: the font-family is the default on hover, but switches to Lato after it's selected. So, I believe this is expected with Chrome. If I could find some explicit documentation that font-family is not allowed to be changed here, I would be more satisfied, but this is the most I could conclude.
can anyone explain this please?
So the tool shows that the rgb(250,255,189) is superceded by the salmon (because the rgb is crossed out) YET despite salmon being the one showing, the summary row and the actual colour displayed is the rgb(250...) colour!
It's bad enough that auto-fill css seems to override anything we might want to style but even the Chrome developer tool doesn't seem to know how to interpret it....
I have a rule that is more specific than the user agent stylesheet, the same definition but with the class specified too, yet Chrome's autofill is still winning - any solution?
thanks
You can try -webkit-autofill
input {
background-color: white;
}
/*input:focus {
background-color: grey
}*/
input:-webkit-autofill{
transition: background-color 1s ease-in-out 5000s;
}
body {
background: #333;
color: #fff;
display: flex;
font-size: 2em;
justify-content: center;
}
<form>
<div class="form-group">
<label for="exampleInputFirst">First Name</label>
<input type="text" class="form-control input-lg" id="exampleInputFirst">
</div>
<div class="form-group">
<label for="exampleInputLast">Last Name</label>
<input type="text" class="form-control input-lg" id="exampleInputLast">
</div>
<div class="form-group">
<label for="exampleInputEmail">Email Address</label>
<input type="email" class="form-control input-lg" id="exampleInputEmail">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
I think you are actually having a problem with webkit-autofill. But that color should only appeear if Chrome is auto filling your input fields. Which probably it is.
Take a look at this quote from MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill
The user agent style sheets of many browsers use !important in their :-
webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.
So I guess this could be a problem. Did you try checking out the page in incognito window? So that the Chromes auto-fill feature doesn't turn on?
I have 2 inputs (for email and phone) and a button. I want to use rule for button only if input[type="tel"]:valid and input[type="email"]:valid at the same time, but I can't do it correctly. Is there a way of doing this using css?
Try something like this:
input[type='tel']:valid ~ input[type='email']:valid ~ button {
color: green;
}
This assumes that the two input fields and the button are direct siblings.
Your question is not clear. However I try to answer
CSS:
:valid selector is normally on a input element where the user types data and if its a valid type it shows the css style for :valid and css style for :invalid if invalid.
input[type="tel"]:invalid, input[type="email"]:invalid {
border: 2px solid red;
}
input[type="tel"]:valid, input[type="email"]:valid {
border: 2px solid green;
}
The button is normally used to submit the form. If the inputs are part of form element than the browsers validates the form before submission. You can also use javascript to validate the form before submission by adding onsubmit="return validateForm()".
<form action="demo_form.asp" method="post" **onsubmit="return validateForm()"**>
<input type="tel" name="telephone" required>
<input type="email" name="email" required>
<input type="submit" value="button">
</form>
All,
I need to have any input validation messages display below the element instead of next to it. The base CSS file puts a margin-bottom = 19px on the <input /> element so I need to offset this because if I don't the message gets inserted 19px below the input element.
Example:
http://jsfiddle.net/L28E7/2/
ASP.NET is generating all of the HTML so I am hamstrung somewhat in terms of what I can do.
I can access the .field-validation-error class and override it so that's what I did.
My CSS works (In FireFox at least) and produces the following:
I had to use negative margin-top to get the message right under the element, which I am not happy with.
How can I improve this?
Thank you!
The CSS
div .field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
margin-top: -19px;
margin-bottom: 10px;
}
The HTML
<div>
<label for="NewClub.NewClubName">Name your club!!!</label>
<span class="required">*</span>
</div>
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName"></span>
if this is how your HTML looks after the creating of inline error message
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName">heloo hell</span>
Then use the below css. This will automatically put your message below the text box
.field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
}
Here is the fiddle
http://jsfiddle.net/L28E7/