I am trying to figure out the way to replace <input type='file' /> and make it's replacement accessible as the mentioned input itself.
Question is: Can I have it both ways, or is type='file' the key of the accesibility keys?
My approach:
I've basically told the browser to forget about type='file''s existence with CSS:
input[type=file] {
display: none;
visibility: hidden;
opacity: 0;
height: 0;
width: 0;
position: absolute;
top: -9999px;
}
Prepared it's replacement:
<input type='file' />
<label for="file">Upload your file</label>
<input type='text' id='file' />
Fixed OS' styles with some pretty CSS and added the JS (jQuery) code to handle the file browser displaying:
$("#file").on("focus", function(ev) {
$(this).siblings("[type='file']").first().focus();
});
And handled upload for the file input so it displays filenames and does other cool stuff browsers prevent.
Do I need to add some extra aria attributes to make it more descriptive? Should I, for example, prevent type='file' from being selected with tab by setting tabindex="-1", so the person-in-need-of-accessibility does not get confused while opening file browser two times in a row within short time period? Should I add an id='file-label' on my <label> element and aria-describbedby='file-label' on the type='file'? Or should I just give it all up and use the filthy standard type='file'?
There's no corresponding role in ARIA for the input[file] tag. You are using five different ways to hide the input[file] element (display:none, visibility: hidden, opacity:0, width=0;height=0 and offscreen positionning), that's way too much and putting a tabindex=-1 on a display:none element has no effect...
In my humble opinion, it would be better to replace the input[file] with a button as this button would trigger a click on the hidden input[file].
The input[text] would give a curious announcement on the screen reader.
Of course, it could be a good thing to modify the button text to specify the selected file after a selection has been done.
Related
It's not a JS question, just looking for a clear css solution if it's possible.
For a radio button or a checkbox we can use the :checked pseudo class:
input{
% styles %
}
input:checked{
% another styles %
}
Are there tricks for checking if a file attachment exists with CSS?
(updated, due to misunderstanding the question)
It is possible to check if a file was attached using the attribute required.
See: http://jsfiddle.net/1ua59jt1/1/
HTML:
<input id="file" type="file" name="fileselect" required="required" />
CSS:
#file:valid { color: green; }
#file:invalid { color: red; }
But you can never really validate, if a "correct" file was selected this way. You can only check if or if not a file was selected at all.
// completion update:
The required attribute is HTML5. Please be aware that not all browsers support this: http://www.w3schools.com/tags/att_input_required.asp
That means the only trusted way for client side validation is using javascript. If you want to do so, I recommend using the novalidate attribute on your form to disable the browsers default validation (http://www.w3schools.com/tags/att_form_novalidate.asp).
But always use server-side validation, too. You can never make sure the user has enabled jaavscript or hasn't manipulated javascript. So the best way is always to validate values on the side you have fully control over: the server, i.e. your action the form sends its data to.
I have a page with a FileUpload control rendered dynamically. At runtime, Asp generates the following input:
<input name="ctl00$ContentPlaceHolder1$ucPF$ucCustomField2$field2" id="field2"
type="file" Validators="[object HTMLSpanElement]"
cachedHoverStateItem="[object Object]"/>
In Google Chrome, the display seems to be spot on:
However, in IE8, not so much:
I know it's a small detail, but it still bothers me unreasonably. Any one of you would happen to know why the text is not vertically aligned and what can I do to fix it? Perhaps it's not a normal behaviour and I'm doing something wrong on my end?
I have tried adding the following CSS:
input[type="file"] {
line-height: 1ex;
}
But it didn't change anything.
File inputs are actually platform dependent and there is no standard way to style them... I've worked with them in the past and what most people tend to do is create an invisible file input and a separate text-input/button combi. The on-click of the button then triggers the on-click of the file input, and after the file input has a value it is copied to the text-input via Javascript.
Something like this (pseudo-code):
<input type="file" id="file" style="visibility:hidden" onchange="setFile(this.files[0])" />
<input type="text" id="filename">
<button onclick="document.getElementById('file').click()" />
With something like this in Javascript:
function setFile(file) {
var input = document.getElementById("filename");
input.value = file.name;
}
The code above asserts you're only supporting browsers which support the new (in progress draft) of the File API, there will certainly be ways to do this for older browsers as well...
Another approach (which works for older browsers) is described here
input[type="file"] {
line-height: 1ex;
}
Is this the line height of your text box? I thought ex indicated the height of the letter itself. Try adding the height of the actual box.
I want to restrict the user to only be able to change the contents of the box with the spinners provided with input type="number" in HTML5, and not be able to type anything into the box
<input type="number" min="0" value="0" step="5"/>
Can I do this?
(my intended audience will only be using Chrome, so the spinners not appearing on IE(9) and Firefox(13) is not an issue)
You can use Javascript onkeydown event here... Which will prevent the user to type anything, and still he will be able to use the arrow controls to increase and decrease the numbers.
<input type="number" min="0" value="0" step="5" onkeydown="return false" />
Demo
Note: Just don't depend on JavaScript and HTML, always have a server side validation to ensure that user didn't posted any malicious input. Javascript can be disabled and user can misuse by adding any text in the textbox, but there is no other way you can stop him, so keep a server side check as well.
As you commented that you will like to disable the text selection as well, so that users don't get confused, you can also use CSS positioning techniques here, as you said that intended users are of Chrome only, so there is not much of cross browser issue, so you can do something like this...
Demo 2
Wrap the input element with the span element, and just with CSS positioning technique and :after pseudo, we overlay a virtual element over the input.
Now I've kept the outline just for the demonstration purposes, you can remove them safely.
span {
position: relative;
outline: 1px solid #00f;
}
span:after {
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
outline: 1px solid red;
width: 91%;
}
Accepted answer uses onkeydown, which will disable the spinner as well; which is well documented here : https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event
You can use onkeypress which will prevent charCode keys. But MDN says keypress is on deprecation. Though it is well supported, you are advised against it. https://caniuse.com/#search=keypress
My solution is to have your own function to filter by keycodes and preventDefault on all other keyCodes. Note that updateValue is a custom function. To let the spinner do its work you can follow the inline method at the end.
myInputTag = document.getElementsByTagName('input')[0];
myInputTag.onkeydown = onlyUpDownKeys ;
function onlyUpDownKeys(e) {
(e.keyCode===38 || e.keyCode===40) ? updateValue(e): e.preventDefault();
}
This will work on all keyboard layouts. Explore compatibility for your users at https://caniuse.com/#search=.keycode
You may also fit this into the default inline Input tag definition in HTML like this :
'<input class="tableCell" type="number" min=0 onkeydown = "!(e.keyCode===38 || e.keyCode===40) && e.preventDefault();">';
For ReactJs users, do this:
onKeyDown={(e) => {
e.preventDefault();
}}
This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
I tried to change the HTML form, input type file. Here is my code:
HTML, form id = form
<input class="upload_file" type="file" id="file" name="file" />
.CSS
I tried both:
.upload_button{
background: url('../images/upload_btn_bg.png') no-repeat;
width: 200px;
height: 40px;
}
#form input[type=file]{
background: url('../images/upload_btn_bg.png') no-repeat;
width: 200px;
height: 40px;
}
None of both of those methods works. I did see from some website, like facebook, youtube, google or twitter, they have different style. Wonder how they do it.
You can't do anything with input type file (other than huge hacks). I know this sounds horrible, but the web standards still haven't come up with a solution for that.
What I would suggest though, is that you used something more flexible, such as swfUpload, which let's you change stiles, and also check for file size prior to uploading.
Some neat examples of it can be found here
Hope this helps you
For example, try this variant http://www.quirksmode.org/dom/inputfile.html
Best hack ever. Input file HTML:
<input type="file" class="hide" id='inputFile' />
Browse File
using jQuery:
$('#triggerFile').on('click', function(e){
e.preventDefault()
$("#inputFile").trigger('click')
});
Why don't you just put the css to display: none and then trigger this button with another button? This can be easily done with javascript and then you can style the button yourself completely
Here's an example of how to trigger a button with another, but this is just one of many ways:
One button firing another buttons click event
You can change the font-Size for height or follow this url http://www.quirksmode.org/dom/inputfile.html ( which is basically what I do in my projects ).
Actually you can!
You have to do it with the SI.Files Library.
Here is a good article about how its done in details:
Good Luck!
Bhee,
just add CSS definitions to your html input tag:
like:
<select style:"...whatYoureadBelow..."></select>
or
<input style:"...whatYoureadBelow..." />
CSS definitions:
border:none;
background-image:url('somePathToImage');
background-repeat:no-repeat;
//those things below adjust according to your background image size
width:XXpx;
height:XXpx;
Thus you'll get what you have on facebook or elsewhere ;)
I'm using <input type="file" /> in my webpage. I've different CSS classes for button and other controls. But I'm not able to add any class, style to browse button that appears due to above tag.
Is there any way to change its default appearance?
Thanks is advance.
You can't do that. You could only apply style to the entire <input />.
You could use opacity: 0 CSS hacks to replace it with you favorite image and image:hover.
Keep in mind that height: property will not work on Firefox 3.6; You could use font-size: to enlarge the height instead.
I have an example made: http://timc.idv.tw/html5-file-upload/ ; inspect the CSS of the 2nd demo.
You can't style the file input directly, but you can indeed give it some faux styling and/or make it invisible but still clickable. There's an article on how to do so at Quirksmode.
The <input type="file" /> control is notoriously difficult to style.
Here are some articles that can help.
There are also some nice libraries for styling hard-to-skin form elements. Uniform is nice for selects and upload fields.
You can't style a file input button with CSS. This is not the only element that you can not style. Some other inputs are not accepting styles. Look at this fiddle to see many types of inputs. Based on your browser some inputs renders different. Inputs like range input or date inputs are using OS level UI that is not editable by CSS.
What you can do is hiding the file input and showing another element like a div or another input that is accepting styling like button type input as your file input and trigger trigger click and submit (hitting enter) events on your hided actual file input.
Code example:
HTML
<input type="file" />
<label>Select file to upload: <input type="button" /></label>
CSS
input[type="file"]{visibility:hidden; width:0;}
JavaScript:
var fileInput = document.querySelectorAll('input[type="file"]')[0],
fakeFileInput = document.querySelectorAll('label')[0],
clickEvent = document.createEvent('MouseEvent');
clickEvent.initMouseEvent('click',true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null);
fakeFileInput.addEventListener('click', function(event){
fileInput.dispatchEvent(clickEvent);
}, false);
Look at fiddle in action
So answer of you question is: No, unfortionantly you can not style file input BUTTON!