possible to mark an html element to only use browser's default css?

Question

I am developing a chrome extension which works on many websites and adds a search text box to the page. Is there a way to mark this input element such that it only uses browser's default CSS styles (and not those that are specific to the website)?

The issue is different sites will have different styles applied for their input boxes. For the extension input box to look consistent across web sites, I'd have to explicitly specify values for all the relevant CSS properties. I am trying to avoid that and am wondering if I can instead mark this element somehow to not use the website styles but only use the browser defaults?

score 2 · Accepted Answer · answered Dec 27 '12 at 09:21

2

There is no way in CSS to make an element isolated from the effects of style sheets on the page, and there is no way to tell that only browser default style sheet be applied. You can just set properties to desired values, or modify the style sheets being used so that selectors don’t match your element.

You might consider putting the search box in a separate file and embedding it via iframe (or object) inserted into a page and perhaps positioned absolutely. Within the framed document, the style sheets of the framing document have no effect.

answered Dec 27 '12 at 09:21

Jukka K. Korpela

195,524
37
270
390

Look for [CSS Specificity](http://www.w3.org/TR/CSS2/cascade.html#specificity) if you are going for first solution – Sudarshan Dec 27 '12 at 09:52
@Jukka I posted a related [question](http://stackoverflow.com/questions/16589222/issues-with-using-an-iframe-to-show-chrome-extension-ui-on-a-web-page) here. Would be helpful to hear your thoughts. – tanushree May 16 '13 at 13:50

score 1 · Answer 2 · answered Jan 05 '13 at 20:54

Just a follow-up to my question. Here's the CSS that I am using to have the text input element look and behave consistently across different websites. It is working well for all sites that I have tested on, so far. Any feedback/ comments on this would be great.

input.reset-text-input {

/********
dimensions and float property of the input element
*********/

box-sizing: border-box !important; /*using box-sizing for easier calculations. make sure to specify this because it varies across sites, and changes the effective dimensions of the textbox*/
margin: 0 !important;
padding: 2px !important;
width: 150px !important;
height: 20px !important;
float: none !important;


/********
border, outline and drop shadow
********/

border: 1px solid #999 !important;

/*some border radius*/
-webkit-border-radius: 2px !important;
-moz-border-radius: 2px !important;
border-radius: 2px !important;

/*no drop shadow*/
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;

outline: none !important;


/**********
text properties
***********/
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 13px !important;
color: black !important;
vertical-align: baseline !important;
word-spacing: 0px !important;

/*not sure if something like this can help. commented for now*/
/*-webkit-appearance: textfield !important;*/
/*appearance: textfield !important;*/
}

input.reset-text-input:focus {
     /*show an outline around the element that is same as chrome's default. this needs to be set as it is turned off on some sites. */
    outline: 5px auto -webkit-focus-ring-color !important;
}

`

possible to mark an html element to only use browser's default css?

2 Answers2