How does one style a form input field of type file for Safari, Chrome, and other WebKit-based browsers?
Right now, all I get is the Choose File button displayed on top of the usual text input box.
I've looked around a bit on Google, but haven't really seen anything helpful.
All rendering engines automatically generate a button when an is created. Historically, that button has been completely un-styleable. However, recently Trident and WebKit have added hooks through pseudo-elements.
Trident
As of IE10 the file input button can be styled using the ::-ms-browse pseudo-element. Basically any CSS rules that you apply a regular button can be applied to the pseudo-element. For example:
<input type="file">
::-ms-browse {
background: black;
color: red;
padding: 1em;
}
This displays as follows in IE10 on Windows 8:
WebKit
WebKit provides a hook for its file input button with the ::-webkit-file-upload-button pseudo-element. Again pretty much any CSS rule can be applied, therefore the Trident example will work here as well:
<input type="file">
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
This displays as follows in Chrome 26 on OS X:
Few days ago I had task to stylize an input="file" with CSS (mostly CSS3 with extra effects) and it is possible to do that.
I've written (or made small rewrites to filestyle plugin) a jQuery plugin. Its core behaviour is the same with images but I've totally replaced images with spans and divs. The plugin hides input="file" then builds a wrapper with CSS and finally triggers click actions on hidden input.
I hope it will be helpful for everyone.
Here's an example of how to style input="file" with only CSS.
I don't believe that you can. Apple only recently decided to enable styling of their form controls. They believe that it's harder to find buttons and inputs when they don't look like buttons an inputs - so they might not let you style their file upload inputs yet.
I'm around 90% sure you can't do it.
Firefox 4 will let you style input elements (in a round about way): link
Hopefully the other browsers will catch on to what an enormous pain point this removes.
If your only interested in webkit browsers, you can use their built in pseudo selectors to target different parts of the file input element. input::-webkit-file-upload-button {...}, for example.
Having a Flash uploader can give even more pain:
It is only working in IE in the same session as your browser and in all other browers it makes a new session, so you will kicked out of your back end secure app.
The only solution to that is sending your session data to the Flash as well... there you go!
I landed on this page looking or ways to style the file input item for Safari... I have lots of them in a table cell of only 150px wide but these inputs are forcing it bigger.
I have found just one solution until now, and that is to let them float above the rest using style="position:absolute;z-index:2" while my TD has position:relative styling.
It's a bad bad solution, I know!
Related
How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right.
This will give you insights as to the styles being overridden or ignored (line threw).
CTRL + SHIFT + I
To Find Errors & Warnings use CSSLint
Debugging CSS and HTML code bugs can really ruin your application design. There are multiple ways to debug CSS and HTML code. There are few things or ways you should consider the debugging and taking care while developing HTML or writing CSS.
Check your syntax errors with http://csslint.net/. It provides the
nice tool and highlights a line where an error occurs.
Closely review your cross-browser compatibility issues. A site looks nice and beautiful in a firefox but sometimes it will not
look nice with another browser at that time you should take care of
cross-browser compatibility issues of CSS. You should nice and proper
CSS framework that will prevent to generate cross-browser issues and
verify HTML tags and CSS properties which may support by browser
correctly.
Browser web developer tool allows outlining an HTML and element with
different criteria this will allow to writing appropriate CSS for HTML
element.
Turn on or off stylesheet with Chrome dev tools. If you’re wondering
how your CSS is affecting a particular page element, the Chrome
DevTools make it easy to toggle each property. In the Google Chrome
web browser, simply right click and choose Inspect Element from the
context menu.On the right side of the Elements panel, you should see a
tab called Styles with some CSS inside of it. This shows you which CSS
declarations are being applied to the selected element, and if you
hover over each CSS property, you can uncheck them individually. When
a property is crossed out, it typically means that it is being
overridden elsewhere. You may need to uncheck a property in several
places to actually remove it from an element.
Use computed tab in chrome dev tools. it tells you exactly how the
browser is computing your styles. When working on large projects this
is essential for resolving cascading issues, problems with selector
specificity, and more.
You may enable chrome dev tools with ctrl+shirt+I or press F12 key
which supports in almost every browser.
Use this to debug your css
* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }
We are working on redesigning our web-based application’s Front-end. We started with a PoC based on Extjs 6 and we are facing few compatibility issues.
These compatibility issues are related to IE8 and CSS, while it is mentioned on your website that Extjs6 is fully compliant with IE8.
CSS classes work perfectly with all Major Web Browsers (Firefox, IE11, Chrome...) but some do not on IE8.
This is an example of CSS not working properly under IE8:
Ext.create('Ext.button.Button',{
text:'Button Test',
cls: 'btnColor',
renderTo: Ext.getBody(),
});
.btnColor {
background-color: green;
border-color:green;
}
Works on IE11 :
But not on IE8 :
We would like to know if this is a known issue and is there a specific processing which allows us to handle this kind of needs.
Thank you in advance.
The element in your comment above is the wrong element - that's the inner element for the button; you want the class with an id something like button-1009 (it's going to be an anchor or div tag a few elements up in the hierarchy).
And as to why it's not working - there are going to be multiple CSS selectors that define the background colour. The default one, from ExtJS, is going to be x-btn-default-large. The full CSS class for the attribute is going to be something like x-btn buttonCls x-unselectable x-btn-default-large x-border-box.
Done like that, both the buttonCls and x-btn-default-large are equally valid choices - the browser must pick one to use. IE8 is picking the last one; other browsers are picking the first one. Neither is wrong - the ambiguity is in your code.
To fix it, make your CSS selector more specific. Try:
.x-btn.buttonCls {
background-color: green;
border-color:green;
}
This applies to buttons (which will be the only things that have the x-btn componentCls attribute) that have the buttonCls cls attribute.
The problem is JavaScript syntax.
IE8 and earlier are strict about trailing commas on arrays and objects.
Your line renderTo: Ext.getBody(), ends in a comma, but is the last item in the object. In IE8, this will fail to compile.
The solution is simply to remove that comma.
You can keep an eye open for theses kinds of things by running your code through a linting tool like JSHint or ESLint, which will flag this kind if thing up.
The answer of Sencha support team:
https://www.sencha.com/forum/showthread.php?305980-CSS-compatibility-issues-on-IE-8.&p=1118734#post1118734
This clarified a lot for me, it might help you :)
I have a website that will be loaded in a web frame of an iPad app, so I have created a separate CSS file for the iPad, which is automatically loaded by a user agent call. Nothing too difficult here.
The problem is that 2 divs are not responding to the display:none CSS. The sidebar and the footer are still showing, despite being specifically called in the CSS just the same as all of the other elements, which are hidden correctly in Safari on the iPad.
www.themonitorgroup.com/disclaimer.html is a good page to illustrate this issue.
www.themonitorgroup.com/css/ipad.css is the specific CSS file for the ipad.
I assume there is something stupid simple I am missing. Please let me know if you can find anything. Thanks so much in advance.
Validators are your friend. You're missing a closing brace here:
#mainnav {
display: none;
And you have #sidebar rather than .sidebar in the style sheet.
I am getting a styling problem with options. I need some options to appear in bold style, but Internet Explorer doesn't want to render it.
I'm setting it using CSS using font-weight: bold;, which is not working.
An example can be seen in this page: Example, which shows bold fonts in Firefox but not in Internet Explorer.
I have tried in Internet Explorer 7 and 8.
Has anyone has an alternative?
A sample:
HTML:
<select>
<option class="special">Special</option>
</select>
CSS:
.special {
font-weight: bold;
}
IE doesn't allow styling of <option> elements independently. This is because IE uses a Windows form control to render the select box, which doesn't support this feature.
(as an aside, this is the same reason that IE's select boxes can have issues with layering when you put them behind other objects; the form control is being rendered by the Windows OS, not by the browser, so the browser has less control over it than most other elements on the page)
Other modern browsers do allow you to do it, as they render their own select boxes rather than deferring to the OS.
in IE, you can't style an option. I had the same issue...you can give it color but not much else.
You could write a jquery plugin or find an existing one to "convert" your select to a styled list/dropdown.
Also see: Create a styled Dropdown like on jquery UI
You need to apply the font-weight:bold to the paragraph of text, not to an outer div or something else.
Also, make sure nothing else is overriding this declaration. If the above doesn't work, change it to font-weight:bold!important and see if that fixes the problem.
I have a png with transparent background that doesn't work in IE 6. I have gotten round the problem by replacing the few img tags using that image with a DIV, and in CSS I use:
#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}
the problem I have with this is that I then lose alt and title attributes which doesn't make the site very accessible. If I use the above CSS with an img tag I see the correct image but it has the big 'X' over it that IE shows when it can't display an image.
Any suggestions on how I can get IE to behave by showing the transparency correctly in an IMG tag?
One way you can continue to use the DIV tags, but still be accessable is to place a second SPAN tag within the DIV element and put the value for the ALT inside that, then style it to not be off the page... for example...
div.image {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}
div.image span {
position : absolute;
top : -9999px;
}
Then the HTML would look like this...
<div class="image" title="The title for the image" >
<span>The ALT Text</span>
</div>
The title tag will still work on the DIV so you should be okay on that part.
I don't think you can simply hide the text (as in display:none;) because I think screen readers will respect that rule (as in not read it)
you could use javascript to enable transparency in ie6. there are many examples you can find. here is a link to one i have used.
http://jquery.andreaseberhard.de/pngFix/
another option is to use htc for ie6 - see here for solution:
http://www.twinhelix.com/css/iepngfix/
only requires an extra line added to your css file - sorry still may require javascript - not too sure.
I used a small javascript tool for solving this problem a couple of month ago. It's named Unit PNG FIX and it's very easy to use.
While someone here gave a JS implementation for this, this solution will be also executed for FF and other browsers. There are better ideas, for example using MS technology :)
One of them uses something called HTC (hypertext component, if I am not mistaking). It's something like... a CSS for behavior. It's really an XML file which lets you attach some functions to a CSS selector. Again, an MS only technology.
In short, visit this site:
http://www.twinhelix.com/css/iepngfix/
I am using this withing a drupal module and I am very happy. If you are wondering, this is the module: http://drupal.org/project/pngbehave
Note: this does not work under IE tester: http://www.my-debugbar.com/wiki/IETester/HomePage
I am using a Windows 2000 with IE6 (running under vmware, if you have to know) to test IE6 sites.
IE6 supports PNG-8 transparency, but not PNG-24. One of my favorite tools to "fix" IE6 is IE8.js.