On my ASP.NET site, <input type="file"> renders like this in IE11 (an oldschool look):
However, I want it to look like this (more modern look):
When trying <input type="file"> in the same IE11 elsewhere, in e.g. JSFiddle, it looks like I want it to (the more modern look).
I tried tracing CSS styles using F12 dev tools, but I cannot see any styles resulting in the oldschool look.
I'm using <!DOCTYPE html>.
My question: What might be causing the oldschool look?
IE11 Renders that way.
If you want to change it you should use CSS, but it usually isn't easy.
What I usually do is to create my own fake component, with an input type text and a button styled the way I want.
I also have a input type file hidden, when I push my styled button I send via javascript a click to hidden input type file. When the file is selected I update my styled input type text with selected file name.
Related
I have simple xpage with dynamic views. I can switch between them via Navigator that I added from Extension Library. Everything works OK, but the problem is with the CSS. To the navigator I have 1 style sheet attached, which contains the following:
.lotusSelected{background-color:none;}
And this is where it gets interesting- whenever I open the xpage in Chrome web browser, try to open any of the navigator elements and look at the code via Chrome devkit (or whatever it is when you press F12) it shows that the code above now is:
.lotusSelected{background-color:red;}
...So it pretty much changes my CSS. I don't understand why this is happening. Also, it does not happen in Internet Explorer. Can anyone explain me why this occurs and how do I fix it?
Maybe your css style is being overwritten by another one (i.e. from OneUI)
Check if it appears with strikethrough style below in your css debugger.
In that case, you can add !important in your style:
.lotusSelected{background-color:none !important;}
(FYI: this is a css anti-pattern :P )
If you want the background-color to be nothing then use transparent instead of none.
I am trying to streamline my page. Currently I have several CSS files included. I would like to eliminate some CSS includes by getting just a few styles that are used from one large CSS file.
What is the best way to figure out which styles are used from a particular CSS file?
In Chrome, you can Audit your page and this will reveal unused rules, including which file they come from. Just press F12 to load up the Developer Tools, click on "Audits," and then "Run".
Just press F12 to load up the Developer Tools then click on 'Elements' on top-left corner. Now click anywhere below it and press Ctrl+F, it will open find dialog box. Type class in it. It will show where class word is used to define classes in page in yellow background. Clicking on that yellow word displays class details on left side. Copy all classes to a notepad.
All modern browsers are supplied with developer tools. Most of them allow you to Inspect an element via the right-click menu. There you will see the stylesheets that give this or that html element the styles (even with line numbers in the stylesheet). I know that there is an extension for Opera (https://addons.opera.com/en/extensions/details/dust-me-selectors-for-opera/) that checks your CSS for empty (unused) selectors, and I'm sure there are other plugins or extensions for other browsers as well.
I am using Firebug to inspect the elements of a webpage. On the right hand of the page there is a "style" tab that list all the CSS styling for a given tag. These CSS styling are coming from a linked CSS page.
What I am looking to do is somehow copy a set of divs with the CSS hardcoded in the div. This way I can copy and paste the elements and have the exact same styling. Is this possible to do with Firebug or perhaps another tool?
I used IE9 to accomplish this.
Open a page where you want to grab a style in IE9
Press F12 to display Developer Toolbar
In the Developer Toolbar press Find and select "Select element by click"
Then go to "View" > "Source" and select "Element source with style"
I don't know about Firebug, but you could build a script to do it.
List the CSS you want to copy (every property you believe is required to make it portable) and then loop through in JS and getComputedStyle(). Then build a ; delimited list of property:value pairs, and assign it to the style attribute if your element and all children.
This doesn't look like an easy task - and you will no doubt run into problems.
I'm not sure what exactly you're trying to do here but are you trying to apply the same style to multiple elements (divs)? If so you should use a css class. So your html will be
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
and css will be
.myClass
{
height:whatever;
width:whatever;
etc
}
Is there a firefox addon or is there a way to use firebug such that you can select some text on the website and it will tell you what styles are being used for that bit of text?
At the moment if I select a bit of text that is styled using css imported from elsewhere I would have to go digging manually to find out what style is being used. Is there an easier way?
Both FireBug and Web Developer addons can be used for this.
Just right click it in Firebug, choose HTML, and in the right pane, select Style>Show User Agent CSS. This will show a list of CSS rules that are being applied on the selected element.
I use the Web Developer Toolbar in FireFox to test CSS-edits. I want to do the same in IE, and I can somewhat do that with IE8's Developer Tool.
However I can't add a style in Developer Tools, only edit existing styles - does any of you guys know of a way to edit the CSS like you can do with Chris Pedericks Web Developer Toolbar?
You can:
add a style attribute (right click the html tag and click add attribute (with the name style, and then edit the style attribute once its added)
Click the CSS tab, right click the empty space, and add a rule (this is like adding a line to your css file)
Adding to what Gabriel mentioned above.
For a quick addition to test and see the effect I do it a bit differently.
With the HTML tab selected choose the "Attributes" panel next to Style, Trace Styes and Layout.
Click the "+" button and begin typing the css style you would like to add. The new style attribute is added automatically in the DOM view panel.
Hope this helps.
I'm on my Mac right now, but I remember running into that.
When looking at the right side of the Developer Tool, you see a list of CSS styles. Above that you see a few 'tabs': Style, Trace Styles, Layout, Attributes. If I remember correctly you can't change them in the style tab. But you can change them in one of the other tabs. You might have to edit them through the style attribute.
You could try firebug lite but it's a little work to get it setup.
Follow following steps:
1. Click on Developers Tool
2. In Html select element for which you want to add css
3. Select attribute tab present on right side
4. Add Name and Value.
Check your style is applied to html element.