I have an element of type=number. Since I am not interested in having the spin buttons show I added the -moz-appearance:textfield. Now, I noticed that the placeholder styling which I setup (::-moz-placeholder {font-style:italic}) has stopped being applied to this field, in FireFox.
Is FireFox creating a secret element around this moz-textfield or something? Why is it not working for this particular input?
EDIT:
Now I see that it has nothing to do with the textfield. It seems that FireFox does not allow any styling for a number field (even with textfield behavior). This does work in Chrome. Any idea for a neat workaround and why indeed is this the case?
input {width: 20em}
input::-moz-placeholder {font-style: italic; font-weight: 700; color: red}
input::-webkit-input-placeholder {font-style:italic; font-weight: 700; color: red}
.hiddenspinbutton {-moz-appearance:textfield}
.hiddenspinbutton::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;}
<input placeholder="This is text type" type=text><br>
<input placeholder="This is number type" type=number><br>
<input placeholder="Number type without spin buttons" type=number
class=hiddenspinbutton>
Related
I have a login form with username and password inputs. In Chrome on Windows (doesn't happen in other browsers or on a Mac), when hovering over a saved username from the Chrome password manager, the font changes. The font change then changes the width of the input, throwing my alignment out of whack.
Obviously I can set a fixed width to my input to save my alignment but that doesn't really solve the problem, just puts a band-aid on it. What I really want is to prevent the font change in the first place.
I've tried targeting the input with :-webkit-autofill and putting !important all over my input's css just to see if anything would stick but no dice.
Codepen here. You'll need to be in Chrome on Windows and use Google's password manager.
HTML:
<form>
<label>
<input type="text" name="username" placeholder="Username" required />
</label>
<label>
<input type="password" name="password" placeholder="Password" required />
</label>
<button type="submit">Login</button>
</form>
SCSS:
// setting font for more exaggerated difference
* {
font-family: Times, "Times New Roman", serif;
}
// why doesn't this or anything else work?
input {
&:-webkit-auto-fill {
&,
&:hover,
&:focus {
font-family: Times, "Times New Roman", serif !important;
}
}
}
Any clues on preventing this font change would be appreciated!
try this!
&:-webkit-autofill::first-line,
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
font-family: Times, "Times New Roman", serif !important;
}
you might only need this though
&:-webkit-autofill::first-line
the others are just incase
This seems to be a recent change in Chrome: Issue 953689: Previously entered form values overrides styling when moused over. As far as I’ve seen this happens both on macOS and Windows, anywhere autofill is presented to the end user. Apparently this has intentionally been done to fix a security issue with the previous implementation – Issue 916838: Security: Two autocomplete flaws together allow sites to invisibly read credit card numbers after a single keypress
There doesn’t seem to be a way to override those new styles at the moment – if the change in styles is really too obnoxious, you can either disable autofill (Disabling Chrome Autofill) or set your field’s font styles (font-family, font-weight, font-style, font-size to match that of Chrome’s autofill suggestions – as suggested here: https://stackoverflow.com/a/56997845/1798491)
Here is working solution that worked for me in 2021 to prevent Chrome from changing font on password/username input fields:
input#username {
font-family: "Rubik";
font-weight: bold;
color: blue;
}
input:-webkit-autofill::first-line {
color: red;
font-family: "Rubik";
font-weight: bold;
}
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<input id="username" name="username"></input>
Also I noticed that for some reason display: flex conflicts with that code, take a look:
input#username {
font-family: "Rubik";
color: blue;
font-weight: bold;
display: flex;
}
input:-webkit-autofill::first-line {
color: red;
font-family: "Rubik";
font-weight: bold;
}
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<input id="username"></input>
How to change Chrome autocomplete styles on input:
input {
...
font-family: $body-font;
font-size: 1rem;
font-weight: bold;
color: #000;
background-color: #fff;
// Background color
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
// Font styles
&:-webkit-autofill::first-line {
font-family: $body-font;
font-size: 1rem;
font-weight: bold;
// color: green;
}
}
I don't run on windows but have you tried targeting the label and form as well? Re: css specificity. Then try web-kit auto-fills on all
This is the only way I've found to get around the problem of syncing the font-size when autofill is being used. This zooms the autofill and then resizes the autofill::first-line font-size, which seems to give you independent control of both. Line-height needs to be adjusted accordingly. Password input needs a different line-height around 1.25 with these settings (still jumps a little).
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
zoom: 1.1666;
}
input:-webkit-autofill::first-line {
font-size: 0.8333rem;
line-height: 1.5;
}
As of now it seems that there's no way to change this in Chrome. I'd definitely call it a bug.
However, a decent workaround is to set the font-family for all autofill-able inputs or inputs within forms that have autofill abilities to this:
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
This is a great cross-browser, cross-platform solution because it just takes whatever your system font is, which is exactly what Chrome seems to be doing for it's autofill font.
It also ensures that your forms are going to have readable fonts on whatever OS your user is using.
I am trying to simply change the color of a text/password input. Unfortunately, everything to be able to change is hidden behind the #shadow-root so my CSS can't touch it.
I've tried to simply write:
input {
color:var(--ion-color-primary) !important;
}
but of course it does not see anything inside the shadow realm. the HTML is laid out like so:
<ion-input _ngcontent-c0="" class="form__group__item--input ng-untouched ng-pristine ng-invalid hydrated ion-untouched ion-pristine ion-invalid has-focus" formcontrolname="email" type="text" ng-reflect-name="email" ng-reflect-type="text">
#shadow-root
<style></style
<input> // Need to edit this one
<slot></slot?
<input type="hidden" class="aux-input" name="ion-input-0" value="">
</ion-input>
The css that's controlling the color of the input is not using a variable that I'm able to change anywhere else
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 11px system-ui;
}
but I'm not able to override those. I feel like I need to do something in the root, but I don't know CSS variables yet.
is there any way in Ionic 4 to change the input text color??
Doing a quick Google search brought up this site which explains you can use the ::shadow pseudo-element to style elements within shadow trees, so try this
ion-input::shadow input {
color: var(--ion-color-primary);
}
Edit:
Doing some more digging around I found this SO post which says you can't style things inside the shadow DOM with global CSS, so you need to instead create and append a style tag to the host.
// host is the element that holds the shadow root:
var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';
host.shadowRoot.appendChild(style);
Native input in ionic4 inherits text color so you just have to set css color of ion-input.
HTML:
<ion-input placeholder="Muhahaaaa"></ion-input>
CSS:
ion-input {
--placeholder-color: green; /* placeholder text color */
color: var(--ion-color-primary; /* input text color to primary */
}
Reference to ionic code (4.0.0-beta.11):
https://github.com/ionic-team/ionic/blob/master/core/src/components/input/input.scss#L43
I'm trying to style the font in an input button as bold.
Here's my code:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
Here's my CSS:
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: bold;
}
All the styles are being applied apart from the bold.
Here's a JSFiddle showing the problem: http://jsfiddle.net/CJg43/1/
UPDATE: Why the close votes? Here's a screenshot of how it looks for me, in Chrome on MacOS:
UPDATE 2: ... and for comparison, here's how it looks with the solution (background-color: white) applied - http://jsfiddle.net/CJg43/23/
Are you using chrome for a MacOS? If so, try adding a background-color to the button to see if it fixes it. The default Aqua styles might be interfering. You can also try -webkit-appearance: none; or -webkit-appearance: button;.
When you use numeric values with the font-weight property and you want to use bold then use the value greater than or equal to 700
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: 700;
}
Js Fiddle Demo
On a project using jQuery UI and jQx, we are applying to all form fields the user selected theme and came across this problem :
When selecting text in input (text) fields, the background color is not the same across browsers. I know that this is browser / OS specific, however it leads to this oddity :
Chrome
IE 8 and 9
As you can see, the selected text in IE may cause problems as the selection background color blends with the rest of the element. (Why IE has this color set to white is beyond me.)
I have tried the "changing text selection color" CSS trick, but it works everywhere else than what I'm trying to change.
Is there some voodoo magic or some other poorly documented feature that can make IE behave less like... how it behaves? (And hope that IE10 really sucks less.)
Even though this question is very old I'm answering here to save anyone else trying to resolve this thinking it isn't possible. We were ready to give up and just accept this behaviour from Internet Explorer when we stumbled on the answer accidentally.
It seems that Internet Explorer uses this highlight method for selected text in any textbox that has the color set in its style - if you remove this attribute the highlighting works normally.
We stumbled accross the answer when we moved the color attribute into its own class and applied both classes to the textbox.
The following will exhibit this text selection highlighting in IE:
<input type="text" id="uiSizeWidth" class="SizeInput">
.SizeInput {
width: 70px;
text-align: center;
height: 30px;
font-weight: bold;
margin: 2px;
color: #ef4915;
}
But this will not:
<input type="text" id="uiSizeWidth" class="SizeInput InputColor">
.SizeInput {
width: 70px;
text-align: center;
height: 30px;
font-weight: bold;
margin: 2px;
}
.InputColor {
color: #ef4915;
}
You can then use the following CSS to style the highlighting to whatever:
::-moz-selection {
color: #fff;
background: #39f;
}
I have a super simple HTML form:
<form name="editor" action="#" method="POST">
<textarea name="contents" cols="100" rows="50"><?php echo $text; ?></textarea>
<br>
<input type="submit" name="submit" value="Submit" />
</form>
Text echoed inside it is HTML code.
Now, when CSS is turned off, it works perfectly.
But when it's turned on, I:
can't click anywhere inside the textarea text to place the cursor there
can't move cursor with arrow keys, it will only move a few characters left and right, and if up/down arrows are pressed, it moves the cursor to the very top/very bottom of the textarea.
What have I tried:
Excluding the textarea from CSS firebug showed applied to it
Trying with or without JS to check if that makes a difference
Tried different browsers, same issue repeats
Turning off CSS completely and then it works, but it's not an option
The only idea I have is that maybe the textarea is inheriting some CSS from somewhere, but what kind of CSS would cause such behavior, what to look for?
Here's the CSS as seen by firebug:
textarea {
overflow: auto;
resize: vertical;
vertical-align: top;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
}
html, button, input, select, textarea {
color: #222222;
font-family: sans-serif;
}
Thanks for any replies!
Thanks everyone! You actually helped me by setting this fiddle, I started pasting part by part of CSS there, and here's what caused the issue, if anyone gets into same problem:
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Basically disabled text selection was obviously inherited from body.
Thanks everyone again.
PS. Also to clarify to anyone who suspected that my code inside textarea was unescaped - yes it was, but that doesn't seem to be a problem, you obviously can do that.