Safari showing image in input file element - html

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;
}

Related

IE Select Checkbox When Image is Clicked

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;
}

css button font size doesn't work

I can't get a input button to change its font size unless I change the background color.
this html:
<input type="button" id="startStop" value="start" />
and this css:
input#startStop{
font-size: 3em;
}
result in this:
which is exactly the same as with no styling at all.
Nothing I do to the css changes it: making it 60em; changing how I select it; they all result in the same, default-looking button.
I inspected it in Chrome, and the style is actually hitting the element, and not getting overridden:
But somehow the computed style isn't working:
(that's with a base font-size of 1em for the whole document. and, no, changing the base font-size has no effect)
The only thing that changes the font size it is if I give it a background-color:
input#startStop{
font-size: 3em;
background-color: white;
}
results in this:
Can anybody tell me what is going on?
EDIT: #Hashem Qolami, thanks for posting it in an external editor, which I should have done. When I look at your JS bin, it looks like this:
EDIT 2: it's browser specific.
The error is only occurring on Chrome, Safari and Opera, and only on Mac.
If renders correctly on Firefox for Mac and on all browsers (IE10, Chrome, Firefox, Safari, and Opera) on windows.
Indeed this only happens on WebKit-MacOS based browsers. Seems to be a WebKit restriction so that the Aqua appearance stays always so.
As long as the Aqua appearance is enabled for push buttons, certain CSS properties will be ignored. Because Aqua buttons do not scale, the height property will not be honored. Similarly font and color customizations will also not be honored. The overriding principle for push buttons is that you will never see a button that is some “half-Aqua” mix. Either the button will look perfectly native, or it will not be Aqua at all.
Source: https://www.webkit.org/blog/28/buttons
Which explains why setting a background makes font-size works; it breaks the Aqua appearance.
#pzin's response got me started on the right track. He's right in that anything that breaks aqua will get it done. The recommended way to handle it without having to specify a background color is this bad boy:
-webkit-appearance: button;
Setting a border property should also work. But I think -webkit-appearance: none; would be the best approach, as it "turns off" the Aqua appearance on MacOS browsers, so any other form control that Aqua inhibits CSS for would subsequently be style-able with your choice of CSS. Was meant to add this as a comment, but don't have enough reputation ;_;.
I see that you successfully had solved the problem, but I wonder, if the only problem is to make the button bigger, why sticking to font-size method while you can also change the button size by width + height or padding.

Remove border/bg images on select on chrome (mac)

I'm styling a print css file to nicely print out a web page with several input elements. All looks good when printed from PC browsers but when I look at chrome on Mac a select element prints out with the rounded corners and select arrows in black (see img)
(source: onexamination.com)
css on this is
input, select {
border: none;
overflow: visible;
background: none;
}
How do you get rid of the background things - dont even know what to call them, are they images !?
Managed to find a solution to this...
-webkit-appearance: none;
This seems to remove all rendering on the element and leave it just as the selected text when printed out.

Checkbox and dropdown arrows invisible in chrome

For some reason my checkboxes and dropdown arrows are not visible in chrome, however, they still work.
They are perfectly visible in IE. When I load the page in IE, then try loading the page in chrome, they usually appear until I refresh the page again in chrome.
Anyone know what the problem might be?
Reference image: http://i.imgur.com/Q66w6.png
A 'solution' to this Chrome problem is to
open Task Manager
refresh the page in Chrome while the Taks Manager is open in front of the browser.
I couldn't believe this would actually work when I read about it, but I've seen it with my very eyes. This issue apparently exists since the early versions of Chrome and still exists in current versions, though it only occasionally occurs. It seems to be permanently gone after this 'fix'.
In webkit browsers the following code will remove dropdown arrows.
select{
-webkit-appearance:none;
}
Checking in your browsers inspector will indicate if it's being applied in your case or not.
Found this question while having the same problem.
Setting:
input {
width:100%
}
was the cause of the problem for me. This:
input[text] {
width:100%
}
was what I wanted (leave checkbox widths unchanged) -- setting the width of checkboxes in chrome seems to make them disappear.
As user48956 mentioned; setting input width to 100% causes checkboxes to vanish in chrome.
I use bootstrap and often have forms where I want all inputs to stretch 100% and don't want to use bootstraps form methods and this issue still comes up.
If you have defined input {width:100%} you can put a width on the div containing the checkbox and it will fix. e.g.
<div style="display:inline-block; width:20px"><input type="checkbox" name="read_privacy_policy" id="read_privacy_policy" class="pull-left"></div>
<div style="display:inline-block">I have read and understand the Privacy Policy.*</div>
or you can set style="width:auto" on the input itself
I had the same issue
Try this css style supression all style that acts in the input checkbox element.
-webkit-appearance: checkbox!important;
I think it's a bug and it's still there. I use checkboxes in a ligthbox window and they don't show. I'm on OS-X using Chrome 21.

What CSS can I use to make an HTML file field transparent?

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.