I want to have an <input type='file'> that overlaps on an image, so that when the user clicks on it, the file upload dialog opens, and the image uploads via AJAX.
So I want CSS to style the field in such a way that either only the browse button is visible (with no associated box), or even better, only a transparent button is visible with overlapping text like "change photo", nothing else.
Needs to work on:
FF 3+
IE 7+ (pref 6+)
Chrome 5+
Safari 3+
Opera 9+
File input opacity test => http://www.jsfiddle.net/steweb/LVjFy/ ..set its opacity to 0 and it's fully transparent but clickable!
Another example with img and transparent file input => http://www.jsfiddle.net/steweb/LVjFy/2/
EDIT (+ js that simulates the file input click): http://www.jsfiddle.net/steweb/LVjFy/6/ ..don't need to set opacity (EDIT2 needs to be tested, isn't working on FF)
I don’t fancy your chances. <input type="file"> isn’t generally very style-able, because CSS can’t really describe its layout.
the magic word is "opacity".
input /* type="file" */
{
opacity:0.0;
filter: alpha(opacity=0); /* IE 7 */
}
You can click it, but dont see it ;)
My solution http://www.jsfiddle.net/dHFyZ/
background: transparent should do the trick for any invisible element that you want clickable.
Related
I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
I want to deactivate the Chrome's default CSS like the input field background-color and all other stuff but i dont know how. Someone can explain me what i should do ? I should add some piece of code to my CSS file i guess.
To be more specific one of my problems is that i want to make an input text field with black background with background opacity of 0.5 and with white text color. So i made it and it work on IE or Mozilla but doesn't work on Chrome.
So all i want is to make my website's css to look same on Chrome as on Mozilla or IE.
Don't use it on the radio or checkbox inputs any time as they can end up looking like an unuseful skinny rectangle.
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
I have a file upload element
<input type="file">
When I choose a file most browsers (i.e. Chrome and FF) display the image name. Safari however is showing a tiny thumbnail. Bad Safari!
My end goal, which is working everywhere except Safari, is to have a custom upload button using a psudo element. After selecting an image a tiny thumbnail shows up in the center of my button that I can't seem to get rid of.
To boil down the issue:
Safari:
Everyone else:
Goal after adding font-size: 0;:
To wrap it up here's the final product I'm trying to prevent:
Instead of setting the font-size to 0 you could try visibility: hidden;
I assume, that your "Select Image" button is not part of the input element, so it should still be displayed.
input[type="file"] {
visibility: hidden;
}
In Firefox and Internet Explorer, disabled buttons look greyed out and unclickable. But Chrome renders them just the same as enabled buttons.
How can I change the style of a button (for example its color) without losing the 3d effect, in order to make it look disabled?
I am not asking how to make my own CSS button that looks the same in all browsers. I want to use the browser default buttons, but add an additional style to disabled buttons for those browsers that do not have a different style for them.
So far, everything I tried, like for example changing the background color or background image, made the button lose the 3d effect. The result looks like this, which is not what I want:
This is the result in Firefox, but it looks similar in the other browsers. The button looks much different from the default one.
You could add some transparency to the disabled buttons.
button {
padding: 10px;
}
button:disabled {
opacity: 0.6;
}
<button>button</button>
<button disabled>button disabled</button>
You can do this using background gradients
https://jsfiddle.net/ammfoh3j/
There is a really useful site you can use to generate whatever kind of 3D looking effect you would like
http://www.colorzilla.com/gradient-editor/
<style>
button {
margin:0px; padding:0px;
background: #e4f5fc;
background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
}
</style>
<button>anything</button>
More accurate/pretty http://jsfiddle.net/j3Lgs3x5/2/
Little background information here: I have narrowed down the problem, but can't determine what the fix is. In IE6 the input box won't allow me to use my mouse to select it.
Please go here to see the problem: http://www.malahatautoparts.com/business-application/
The problems stems from an IE6 fix for the CSS background.
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
}
If I remove that from my IE6 css file, input box all of a sudden works.
Any ideas on what I can use to fix this?
The conditional comment you have there for "less than IE 7" isn't even working right for the PNG transparency it's supposed to fix in IE6: I'm seeing grey background around the transparent corner areas. In IE7 the transparency works natively without loading that stylesheet.
The method you're using in the IE stylesheet relies on the alphaImageLoader filter, which I suspect is blocking over top of the HTML form controls on the page.
There's an alternate method that uses VML instead: check out DD_BelatedPNG. I'm not 100% sure if it will solve your problem, but I have a hunch it will, and it's a cleaner solution than what you're using now.
<textarea> and <input> selections: selectionStart and selectionEnd are not implemented in IE, and there's a proprietary "ranges" system in its place, see also Caret position in textarea, in characters from the start.
Also see What are the typical reasons Javascript developed on Firefox fails on IE for common reasons of failure of Javascript/CSS in IE which work in Firefox & other browsers (or vice versa).
Some excellent tips so you can get a uniform look & usage in all browsers.
use css with
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
position: relative;
}