How do I set a different font-family for paper-input. When I inspect the element in chrome it seems to get the style from many classes. Not sure which one to override, also what does -0 mean in a class.
Paper Input's styling documentation delegates to its bundled Paper Input Container's styling documentation, but it still doesn't provide a way to overwrite the font styling.
Fortunately, you can see which fonts it uses on paper-input-container.html source code and overwrite the global Material Design Typography at paper-styles/typography.html, but I think it's not encouraged to do so, hence they didn't brought it as a customizable style.
The corresponding style for the screenshot you took is the following:
paper-input-container.html:
.input-content ::content input,
.input-content ::content textarea,
.input-content ::content iron-autogrow-textarea,
.input-content ::content .paper-input-input {
position: relative; /* to make a stacking context */
outline: none;
box-shadow: none;
padding: 0;
width: 100%;
max-width: 100%;
background: transparent;
border: none;
color: var(--paper-input-container-input-color, --primary-text-color);
-webkit-appearance: none;
text-align: inherit;
#apply(--paper-font-subhead);
#apply(--paper-input-container-input);
}
paper-styles/typography.html:
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* [...] */
--paper-font-subhead: {
#apply(--paper-font-common-base);
font-size: 16px;
font-weight: 400;
line-height: 24px;
};
Anyway, the -0 prefix is just an index. If you have two polymer elements of the same type, it'll place a -0 prefix on the first one and a -1 prefix on the second one. I'm not sure, but I guess that they have been translated into the CSS selector by using updateStyles, since you can customize each one separately through JavaScript, so it helps to namespace each element individually while translating :root and ::content keywords.
So, if you want to overwrite this specific element, I'd tell you to use the -0 prefix, otherwise utilize a more generic class or element to properly select in a general way.
Related
Why does input get Ubuntu font instead of monospace font in this sample?
It is a tiny sample from some HTML code where the inputs are nested much deeper – but has the same effect.
Is there a general rule for what elements I have to specifically set font-family or inherit it? Input, label, button, …
Is it a bad idea to use something like this?
body * { font-family: xxx; }
What I want to do is set a "global font" and optionally set other font-families on elements where that is desired. Thought that was achieved by setting it on html, body { }. Obviously not.
Sample code:
html, body {
font-family: monospace;
}
.inp {
font-family: monospace;
/* or alternatively
font-family: inherit;
*/
}
<p>Some text</p>
<input type="text" value="123456789.0" /><br />
<input type="text" value="123456789.0" class="inp" />
Result (picture):
The result looks like this in Fire Fox on Ubuntu:
I'll add some pictures from Inspector in developer tools.
I was only looking at the rules section of the tools at first and as it say monospace I did not find the fault until I looked at computed ;)
From «Computed» on left and «Rules» on right:
<body> has focus:
<p> has focus:
First <input> has focus:
Second <input> has focus:
Most HTML elements aren't assigned a font-family by the browser's user-agent style sheet, so they will inherit whatever you set on the body element.
Some elements, however, do receive styles from the user-agent, so they override the family you have on body. Inputs, buttons, and other form controls are often a problem.
In a CSS reset, it is very common to give these elements font-family: inherit example from normalize.css:
input {
font-family: inherit;
}
Inherit will set the input to use whatever font-family it would normally inherit, so it will then use your styles set on body.
Looks like it is inheriting the agent font from the input element.
The browser applies its own styling. In your case, the browser's styling on input takes precedence over inherited properties on html and body. On chrome you can see the user-agent style:
input {
-webkit-writing-mode: horizontal-tb !important;
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;
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 0px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
You'll be better off using .inp to style your element. Or for consistency you can style the input type:
input[type="text"] {
font-family: monospace;
}
Been looking at a premium theme and see that for various text and elements on the page, when inspected - many have inherit and 0 for the values.
Why would these not be left blank if they are not required and automatically inherited from the parent? Does it perhaps save on load time?
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
This is done to override browser defaults.
Most browsers themselves apply their own style declarations to make basic HTML pages look prettier. Unfortunately these style declarations often clash with how a designer wants a web page to look. The way to overcome this is to reset the styles to what they should be by default.
Example
A good example of this is with heading and p tags. Take the following example:
<h1>Hello, world!</h1>
<p>Woah, that's a big heading!</p>
Without any custom styling applied, these elements use styles provided by the browser. One of the styles used here is margin, and that's what's putting the large gaps between each element.
We can reset these ourselves by setting the margin to 0:
* {
margin: 0;
}
<h1>Hello, world!</h1>
<p>Woah, that's a big heading!</p>
Because of the need to reset such styles public stylesheets like Normalize.css exist, whose intention is to do nothing more than reset (and normalize) all elements to look the same across different browsers.
I can't seem to change the font-size for the Ionic input. I've tried
input {
font-size: 30px;
}
but that doesn't work. However,
input {
font-family: Times;
}
works, so I don't know what exactly is the problem. I can't even change the height of the input as
input {
height:100px;
}
does not work.
However, when I take out the line in my HTML referencing the Ionic CSS, (lib\ionic\css\ionic.css), my CSS works. I think my CSS should be overriding the Ionic CSS as my CSS comes after it, so what's happening, and how do I fix it?
EDIT:
Even if I put !important, it doesn't work. Interestingly enough,
input {
height:100px; !important
font-family: Times;
}
makes it so that the font doesn't change, while
input {
font-family: Times;
height:100px; !important
}
does change the font.
EDIT2: The problem was with selector specificity:
textarea, input[type="text"]... {
display: block;
padding-top: 2px;
padding-left: 0;
height: 34px;
color: #111;
vertical-align: middle;
font-size: 14px;
line-height: 16px;
}
was overriding it, so I just changed my CSS to
input[type="text"] {
font-size:30px;
}
and it worked!
It is very likely that the specificity stated in the framework is greater than what you are providing in your CSS.
Using dev tools to track down the specific style by inspecting the element should show you how the framework defined its selector.
As some have mentioned, using !importantcould solve this, but it is not a recommended solution as it cheat its way to the max specificity and can't be overwritten later on, except by being more specific with a selector and including the important statement.
You need to put !important before semicolon.
I have read extensively on this site and others about how to change my css for different browsers, but none of the methods I have found are working.
I have an unordered list whose list items appear with different amounts of padding on different browsers. The value is set to 8 px and works perfectly on chrome and safari. I have tried
ul.titles li {
padding: 8px;
-moz-padding: 7px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}
I also tried
ul.titles li {
padding: 8px;
padding: -moz-7px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}
Both of these had no effect. When I tried defining one for -webkit- and one for -moz- it messed up both mozilla and chrome.
You can try this :
#-moz-document url-prefix() {
ul.titles li {
padding: 7px;
}
}
for sure otherwrite your css maybe add a class to your li
Try adding your styles inside of a Mozilla extension:
#-moz-document url-prefix() {
/* Styles go here */
}
So in your case, you can add the following lines of code to your CSS stylesheet:
#-moz-document url-prefix() {
ul.titles li {
padding: 8px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}
}
Another option you might want to try is Normalize.css, which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. I highly recommend it.
Instead of addressing every browser one by one, I suggest using Normalize.css to make common elements begin with common styles. A must have for every single website I develop.
When I set the font family, font size, color etc. it seems that some nested elements override these with ugly browser defaults.
Must I really specify those a dozens of times for any kind of element on my page, or is there a way to set them globally once and forever?
How to do that?
* {
font-size: 100%;
font-family: Arial;
}
The asterisk implies all elements.
If you're using IE, chances are it will revert to the browser defaults for certain elements, like tables. You can counter that with something like the following CSS:
html, body, form, fieldset, table, tr, td, img {
margin: 0;
padding: 0;
font: 100%/150% calibri,helvetica,sans-serif;
}
input, button, select, textarea, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/* rest of your styles; like: */
body {
font-size: 0.875em;
}
Edit: you may want to read up on CSS resets; see threads like this one
I can't stress this advice enough: use a reset stylesheet, then set everything explicitly. It'll cut your cross-browser CSS development time in half.
Try Eric Meyer's reset.css.
you can set them in the body tag
body
{
font-size:xxx;
font-family:yyyy;
}
If you specify CSS attributes for your body element it should apply to anything within <body></body> so long as you don't override them later in the stylesheet.
If you want to set styles of all elements in body you should use next code^
body{
color: green;
}