i have a problem styling html <select> element.
After work around, i found the problem that firefox always overrride css with forms.css in every page load.
my question is how to override firefox default css in my page ?
forms.css, I am assuming this is your style sheet.
I am also guessing that this has some very specific styles that are more specific than select{}
Use firebug to determine what styles are being applied and where they are coming from, will at least show you if your style is being overridden.
Try defining a pseudo class for the element like
select.my_select1 { font-size: 8px; }
Then apply the pseudo class the element with
<select class="my_select1">
Looking at a web app that I'm building now that displays perfectly in all current major browsers, I have assigned pseudo classes to each of these form elements and have no problem.
I hope this helps you
I recently had a similar problem. I made a custom style select but the option:checked was getting a style from the Firefox forms.css that I could not override.
My co-workers found two solutions:
-webkit-text-fill-color: myColor; // on the select
select:focus:-moz-focusring {color: myColor;} // on the select
Related
How to hide the border and background from select options?
I have tried border: none; and outline: none;
Doesn't work.
Image:
And this same question: How to remove border of drop down list : CSS
Doesn't work for me
From the flagged duplicate answer
I tried tinkering with my select options and upon inspection it looks like a browser concern. Browsers have a default css stylesheet, like user agent stylesheet seen in the image. You can't make changes in the console to these styles. I do believe it is possible to override these stylesheets though depending on your browser. Here is a post about overriding user agent stylesheets. Hope this helps!
How can I remove the small square arround the radio button that gets displayed when the input gets focused?
I'm pretty sure this is a duplicate, but I don't know what the square is actually called and couldn't find what I'm looking for.
I tried autocomplete="off" on the input. I played arround with jQuery's preventDefault but without success.
Update:
Thanks for your responses. If anyone comes accross this question, here is the effect of appearance attached (upper pic without appearance, the one below is with appearance) with Firefox:
Just in case someone comes to the same problem.
Update with Chrome / Safari, appearance removes the input
-webkit-appearance: none; would make the radio buttons disappear in
Chrome and Safari. check jsfiddle.net/8uY6H (with Chrome)
– noted by JFK 6
Try this CSS since it is an outline:
input[type="radio"]:focus {
outline:none;
}
Try outline:0 property for the radio button on focus
input[type="radio"]:focus{
outline:0;
}
You need to set:
outline:none;
On the :focus state of the CSS class relating to the checkbox, or directly e.g.
input[type="radio"]:focus{
outline:none;
}
The crucial part is setting outline
The CSS outline property is a shorthand property for setting one or
more of the individual outline properties outline-style, outline-width
and outline-color in a single rule. In most cases the use of this
shortcut is preferable and more convenient.
However, also setting appearance may help cross platform where different browsers render checkbox elements differently.
As noted in the comments below though, this will cause the checkbox to not display in some circumstances- so you would need to produce a pure CSS solution.
The -moz-appearance CSS property is used in Gecko (Firefox) to display
an element using a platform-native styling based on the operating
system's theme.
This property is frequently used in XUL stylesheets to design custom
widgets with platform-appropriate styling. It is also used in the XBL
implementations of the widgets that ship with the Mozilla platform.
As simple as
input[type="radio"] {
outline: 0 none;
}
JSFIDDLE
I'm working on a web page in Google Chrome. It displays correctly with the following styles.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
It is important to note that I didn't define these styles. In Chrome developer tools, it says user agent stylesheet in place of the CSS file name.
Now if I submit a form and some validation error occurs, I get the following stylesheet:
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: -webkit-auto;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
The font-size from these new styles is disturbing my design. Is there a way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet?
What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb CSS reset or normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.
If <!DOCTYPE> is missing in your HTML content you may experience that the browser gives preference to the "user agent stylesheet" over your custom stylesheet. Adding the doctype fixes this.
Regarding the concept “user agent style sheet”, consult section Cascade in the CSS 2.1 spec.
User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.
So if you think you have a problem with a user agent style sheet, then you really have a problem with your markup, or your style sheet, or both (about which you wrote nothing).
Marking the document as HTML5 by the proper doctype on the first line, solved my issue.
<!DOCTYPE html>
<html>...
A user agent style sheet is a ”default style sheet” provided by the browser (e.g., Chrome, Firefox, Edge, etc.) in order to present the page in a way that satisfies ”general presentation expectations.” For example, a default style sheet would provide base styles for things like font size, borders, and spacing between elements.
It is also common to use a CSS Reset to normalize or remove inconsistencies between browsers due to differences between which base styles are applied by each browser.
From the specification...
A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language. ~ The Cascade.
For more information about user agents in general, see user agent.
Answering the question in title, what is the user agent stylesheet, the set of default styles in the browser: Here are some of them:
Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css
Serenity: https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/Default.css#L4
Mozilla Servo: https://github.com/servo/servo/blob/master/resources/user-agent.css#L9
Personal opinion: Don't fight with them. They have good default values, for example, in rtl/bidi cases and are consistent nowadays. Reset what you see irrelevant to you, not all of them at once.
Define the values that you don't want to be used from Chrome's user agent style in your own CSS content.
Some browsers use their own way to read .css files.
So the right way to beat this:
If you type the command line directly in the .html source code, this beats the .css file, in that way, you told the browser directly what to do and the browser is at position not to read the commands from the .css file.
Remember that the commands writen in the .html file is stronger than the command in the .css.
I had the same problem as one of my <div>'s had the margin set by the browser. It was quite annoying but then I figured out as most of the people said, it's a markup error.
I went back and checked my <head> section and my CSS link was like below:
<link rel="stylesheet" href="ex.css">
I included type in it and made it like below:
<link rel="stylesheet" type="text/css" href="ex.css">
My problem was solved.
I just wanted to expand on the response from #BenM based on what I read here from Ire Aderinokun. Because the user-agent stylesheet provides helpful default styling, think twice before overriding it.
I had a dumb error where a button element didn't look right in Chrome. I had partially styled it because I didn't want it to look like a traditional button. However, I left out style elements like border, border-color, etc. So Chrome was stepping in to supply the parts that it thought I was missing.
The problem went away once I added styles like border: none, etc.
So if anyone else is having this problem, make sure you are explicitly overriding all the applicable default user-agent styles for an element if you notice it looks wonky, especially if you don't want to reset the user agent styles completely. It worked for me.
Each browser provides a default stylesheet, called the user agent stylesheet, in case an HTML file does not specify one. Styles that you specify override the defaults.
Because you have not specified values for the table element’s box, the default styles have been applied.
I ran into this same issue, it was because I was working with non-semantic html
<!--incorrect-->
<ul class="my-custom-font">
<button>
<a>user agent styles applied instead of my-custom-font</a>
<button>
</ul>
<!--correct-->
<ul class="my-custom-font">
<li>
<a>now inherits from from my-custom-font</a>
</li>
</ul>
Once the HTML was updated, styles were applied correctly
Every browser will have a rendering engine responsible for converting HTML document to web page.
The rendering engine will have a stylesheet of its own for all the HTML elements, a kind of default stylesheet for all the HTML elements and this stylesheet is called user agent stylesheet.
The rules of user agent stylesheet can be overwritten by author stylesheet.
The rendering engine for google chrome browser is called 𝐛𝐥𝐢𝐧𝐤. And if you look through its source code you will be able to find the default stylesheet.
check this https://www.linkedin.com/posts/smruti-sagar-pattanaik-a3a000195_html-css-chrome-activity-7027888128115847168-USil?utm_source=share&utm_medium=member_desktop
I have a solution. Check this:
Error
<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">
Correct
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Put the following code in your CSS file:
table {
font-size: inherit;
}
I understand that elements can have multiple classes:
.rfrsh-btn {
background-image:url(../../upload/rfrsh_nb_grey.png);
...
}
.submit
{
font-size: 0.85em;
padding: 0;
}
This was working perfectly as an ID before. now I changed it to a class and lo and behold, no images.
But for some reason this <button> element doesn't seem to want to display with a background image and styles applied.
Is there a reason for this? Or am I codeblind and doing something wrong.
I can't use ID either as it's repeated many times on the page.
Thanks all :)
There are several reasons. For instance, it's quite possible your image path is not correct. It 's worth noting that paths in CSS are relative to the .css file 's location, and not to the including page.
To better understand what's going on now and in the future, however, I recommend either working with Chrome, which offers a nice set of debugging tools, or use Firefox with Firebug installed. This way you can inspect your elements and see what styles get applied, overlapped, or any images the browser cannot locate.
For more information: http://www.thetruetribe.com/2008/03/firebug-tutorial-getting-started/
Underscores in class names can cause issues. Try renaming rfrsh_btn.
https://developer.mozilla.org/en/Underscores_in_class_and_ID_Names
Is it possible to override the styling that is applied to a hyperlink if it has the disabled="disabled" attribute?
It's currently greyed out. Not bothered about making it an active link, just want to change the font, color, etc.
UPDATE : Must work in IE6, IE7 & FF
UPDATE :
It's worse than I though the html is <A id="someId" disabled>About Your Group</A>
UPDATE :
I'm going to really have to see what is adding this 'disabled' to the links.. I think it's a jquery plugin.. (ui.tabs, jquery ui.tabs)
The disabled property can't be used on a elements. it only applies to input, select and button elements.
Sure; Internet Explorer puts a bevel-effect on links with this property set. FireFox, on the other hand, ignores this property completely.
Note: Links will still function. Their default behavior is NOT prevented--they just look disabled. They do not behave like a disabled text input.
You are better off using a class to signal if a link is disabled. This will work cross-browser as well...:
The CSS
.disabled { color: #ccc; }
The HTML
...
And to complete the disabled effect; using jQuery, you can select all links with the class "disabled" and prevent their default behavior, like so:
$(function ()
{
$("a.disabled").click(function ()
{
// return false to disable the link (preventDefault = true)
return false;
});
});
I've noticed that ASP.Net puts disabled="disabled" on <a> tags when setting the Enable property to false on an <asp:HyperLink>.
This causes css-rules for that element to be ignored in IE (even for a[disabled="disabled]!), which is extremely annoying. Other browsers don't care, since they ignore that property.
My solution was to simply set the NavigationUrl property to null in the code-behind for the elements I wanted to disable.
The advantage of doing this server side instead of with JavaScript is that it will work even if users have JavaScript turned off.
I don't know to what extent the disabled attribute is supported for hyperlinks. Make sure you test thoroughly.
I see two ways of targeting this in CSS:
CSS 2.1
You can try the CSS 2.1 attribute selector
a[disabled=disabled] { color: blue }
I think this is most likely to work with a non-form element. Doesn't work in IE <= 6. Quirksmode compatibility table.
CSS 3
In CSS 3, it's possible to use the :disabled pseudo-class (source)
input:disabled { background-color: yellow; }
doesn't work in any IE including 8. Works in Firefox, Chrome and Opera. Quirksmode compatibility table
I've never seen disabled used on a normal hyperlink so you will have to try whether that works. Per the specification, the disabled pseudo-class is for disabled form elements only.
Whe you're using ASP.NET, and you disable a LinkButton on server side, the html generated is an <a> tag with disabled="disabled" non-standard attribute. However, there's no href attribute generated, so that the link will not behave like a link in any of the browsers.
The problem is that IE adds the typical "bevel effect" to the disabled link, and the other browsers render it as "regular text".
You can solve the problem in non-IE browsers styling like this:
a:not([href]) /* this is for ASP.NET disabled links */
{
opacity: .5; /* all but IE before 9 */
}
The problem is that IE (at least up to IE 8) keeps doing the "bevel" effect on the disabled link. To make IE behave like the other browsers you need to change the CSS style, adding this non-standard filter attirbute (only works for IE):
filter: alpha(opacity=50);
And you also need to use some javascript, i.e. jQuery, to remove the offending disabled attribute. I.e.
$('#controlId').attr('disabled','')
If your case is even more strange, and you have disabled and href, you should remove also the href so that the style can be applied and the link doesn't work.
I don't think there is a 'disabled' attribute for hyperlink (anyway it doesn't respect w3c recommandations) but you can try to add class for styling these elements like :
<a class="inactive" ...>...</a>
And for the css :
a.inactive {
color:#000
}