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.
Related
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'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>
I have this HTML:
<input type="radio">
<span class="label">
<label id="options_34537_2label" for="options_34537_2">
</label>
</span>
Now I also have some CSS, which hides the radio button itself and puts an image in front of my label.
input[type="radio"] {
display: none;
}
label:before {
background: url("someimage.jpg") no-repeat scroll 0 0 transparent;
}
In IE and FF I can click the image to select the option, in Chrome, clicking does not work at all. Any idea how to solve this issue?
Thanks!
You should put the <input> inside the <label> to make it cliquable:
<label><input type="radio"></label>
And use the background property on your label directly, instead of using the :before pseudo-class. Then add some text or specify a width to show your background.
Anyone knows why the font of this elements are not the same?
Using Anchor Element
<a style="font-weight: bold; ">bold</a>
Using Input Button
<input type="submit" value="bold"
style="font-weight:bold; border: none; background-color: transparent" />
That's because the font-family and font-size are different too:
see
http://jsfiddle.net/RQBr3/
vs
http://jsfiddle.net/RQBr3/1/
with font-size and font-family added.