I have noticed that in case of <button> tags, font-family is not inherited automatically; either I must specify it explicitly like:
<button style="font-family: some_style;">Button</button>
or use inherit property like this:
<button style="font-family: inherit;">Button</button>
However, the font-family is automatically inherited in case of other tags, the <a> tag for example.
Why do we have this issue with the <button> tags?
Here's a DEMO.
Form elements don't inherit font settings, you have to set these properties manually.
If you use font declaration for eg. body,
body {font-family: arial, sans-serif}
use just
body, input, textarea, button {font-family: arial, sans-serif}
or
input, textarea, button {font-family: inherit}
If you inspect your demo in a browser using its Developer Tools, you can see that the font family of the button element comes from the browser style sheet. They show this in different ways, and they may use different fonts there, but the principle is the same: there is a declaration for the font-family property of the element in some style sheet, hence that property cannot be inherited (unless you explicitly set the value inherit on it, of course).
This is not defined in specifications, but neither are such browser style sheet settings prohibited by them, and they are common practice.
I know this is an old question, and I am answering late. Both #panther and #jukka-k-korpela answer the question correctly. However, they are missing one key information about the fix for the precise question and the demo provided by #nikunj-madhogaria. I attempt to complete the answer according to the question.
Since the question is about the button tag, it is probably wise to add button to the CSS fix provided by #panther. So, here is the correct fix for the button tag:
button { font-family: inherit }
Old reply but it might help some people. I added the following:
* {
font-family: arial, sans-serif
}
Related
On my Vue.js application i have tried CKEditor, tiptap, Froala etc. and every one of them prints out all html tags and all inline css styles.
Some images for better understanding what is a problem:
image for better understanding
image with described problem
blog form
I have searched web and found verly little info about this so if anyone know why is this happening please help me out :)
Kind Regards,
Sinisa
you should use v-html and put your text variable inside the element like this:
<p v-html="yourTextVariable"></p>
by the way if you use v-html u probably need to make text appear on next line instead of overflowing (overflowing text is common issue that happen when u use v-html) :
p{
color: #eeeeee;
text-align: justify;
white-space: initial;
overflow-wrap: break-word;
}
How to write a CSS Selector selecting elements NOT having a certain attribute?
I have 2 <div> nodes as follows:
First:
<div class="weEq5" style="will-change; width;">
<button class="_35EW6">
Second:
<div class="weEq5">
<button class="_35EW6">
I need to select the <div> (with the similar class) and each of them which have a similar descending <button> but without the style attribute.
XPath seems working fine as:
//div[#class and not (#style)]/button
I am looking for an equivalent CssSelector.
Trials:
div[class :not(style)]>button (doesn't works).
I have been through the following discussion but they seem to be discarding the class attribute as :not([class]) as in:
Can I write a CSS selector selecting elements NOT having a certain class?
Is it possible to define in CSS NOT to apply style if element have certain class? [duplicate]
I was looking in similar lines ending with :not(attribute).
I think more accurate CSS Selector is:
div[class]:not([style])>button
because the button element is a child of div element.
Hope it helps you!
That's the code you're looking for:
div:not([style]) button{
background-color: red;
}
Now let's break it down.
We have have four selectors in this example:
div and button - these select html elements. We can replace it for example with a class selector like .weEq5.
:not() - indicates that we want everything that does not qualify as the selector inside the brackets.
[style] - an attribute selector which is very powerful. We can place inside the not any other css selector like html tag names (button or div), class names or ids.
The combination of div:not([style]) means that we want all divs that do not have a style attribute. After which we have a space and a button means that we want all the buttons that are inside the above selector.
Adding a > before the button div:not([style]) > button will only select button elements which are direct children of the selected div. It will exclude from selection buttons that are deeper inside the div.
Normally, you would write :not([style]) to match an element that does not have a style attribute, as described here which emphasizes the use of both () and [] brackets, in that order.
But if this isn't working in Selenium WebDriver, and worse still if :not(style) works exactly like how I would expect :not([style]) to, then that's a bug with its CSS selector parser, since :not(style) actually means "not a style element" which makes div:not(style) redundant as an element can only either be a div or a style but not both at the same time. Unless you absolutely require a selector, I strongly recommend using the XPath locator strategy instead of relying on quirks like this with Selenium WebDriver's CSS selector engine that force you to write selectors that are both incorrect and don't work anywhere else that accepts a selector.
I do not understand how the situation developed in the first place, where the structure of the page necessitates the CSS rules to be aware of whether "style=..." exists in the document itself. Or even why style=... is being used.
The style attribute is old-school now, pre-CSS I believe. It also takes precedence over anything in the CSS. That attribute does not accept CSS class names. It accepts only native html style properties like "width","height","font" - old-school stuff - ultimately those are what your CSS resolves to, no matter how fancy or obfuscated it is through frameworks: font, width, left, top, float.. and so on.
By use of the class attribute (instead of style) in the document you get infinite control from which to write smart selectors in your CSS.
You can put 3 classes in the class attribute of your div for example, if you want, and have your selectors apply styling to it if 2 of the classes are present but not if all 3 are there. Tonnes of flexibility, no need to override or use "style=..." in the document at all.
The font style/family is not standard between components.
For example :
input vs textarea
datatable vs datatable page-size popper dropdown
the notification messages
How can I fix this in "element-ui" way ?
Thank you.
Element-UI Version : 2.4.6
I was facing a similar issue, if you are using webpack, one of the options is to add the following code when importing element UI:
import 'element-ui/lib/theme-chalk/reset.css'
You will find the original answer here:
https://forum.vuejs.org/t/elementui-styling-is-not-applied-to-new-webpack-element-ui-project/26194/9
In my scenario I wanted to make a global change to the font-family.
On top of importing the above mentioned reset.css, as you mentioned some components i.e. <input>s, <button>s were still not behaving and inheriting the declared font-family (applied to say the <body>) and were falling back to browser defaults.
Digging around the element-ui GitHub issues, I found the following snippet which forces these missing elements to inherit their font-family, so a single font-family definition on the body will propagate to all components. I insert this right after my body font-family definition.
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
Taken from : https://github.com/ElemeFE/element/issues/150#issuecomment-249750366
Because I'm using a logo in my header, I don't need the title-text. But I would like to have a browser-title.
So I need to set a title and have to hide it in the header - but how?
Possible also to hide the title text with a proper CSS display: none setting. It can be put into the conf/userstyle.css file, so it wont be overwritten by updates. The text resides still in the page but becomes invisible. It may improve the search-engine hits also, maybe.
Possible CSS code:
div.headings h1 span { display: none !important; }
I assume that your wiki looks like dokuwiki.org (meaning that you are using one of recent versions and default template). If not the approach still should be the same, search for $conf['title'] in your template.
There is a block in lib/tpl/dokuwiki/tpl_header.php:
// display logo and wiki title in a link to the home page
tpl_link(
wl(),
'<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
'accesskey="h" title="[H]"'
);
Remove <span>'.$conf['title'].'</span> from it.
Each update of Dokuwiki engine will overwrite this change. You'll need to repeat it manually after each update or copy paste doku template into a new one and update this new template manually.
Possible also to hide the title text with a proper CSS display: none setting. It can be put into the conf/userstyle.css file, so it wont be overwritten by updates. The text resides still in the page but becomes invisible. It may improve the search-engine hits also, maybe.
Possible CSS code:
div.headings h1 span { display: none !important; }
This is the good answer. It works for me.
I'm new to bootstrap. The control-label class seems to be undocumented at the bootstrap 3 website and i have noticed it just accidentally in the examples.
Could anyone explain it's purpose or guide me where I can get more info on it?
control-label is useful when we create forms. At the time of creation, you may come across in such situation like your text field is just after the completion of label.
So you have to write CSS to make it more attractive.
In bootstrap, they have provided class called control-label whose work is to automatically set the label. So that label and text field looks better and we don't have to write CSS for that.
CSS of .control-label:
.control-label{margin-bottom:0;
vertical-align:middle;
margin-bottom:0;
text-align:right;
color:#a94442;
}
NOTE : Here I have not include padding because padding may vary according to screen size.
If you want to know more about it, just look at that Demo.You will at least get some idea about it.
See http://getbootstrap.com/css/#forms-horizontal
It's for labeling a .form-group. For .form-horizontal it does
.form-horizontal .control-label {
margin-bottom: 0;
padding-top: 7px;
text-align: right;
}
... mainly for right-aligned labels.