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!
Related
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've generated a form inside a div. I've managed to style the form's input box and the background and border of the button, but I can't seem to be able to change either the value property for the button or the styling so I can change the font colour to something else than black. I have the following basic code to generate the form:
var csvForm = domConstruct.toDom('<div>Load a CSV file:</div><form id="csvUploadForm" class="uploadForm" method="post" enctype="multipart/form-data"> <input type="file" name="data" id="inFileCSVBtn" value="Upload..." /></form>');
domConstruct.place(csvForm, "loadFilesPane");
This code fires up after the body's been created.
I was under the impression that the value property would set the name of the button, but it defaults to 'Browse...'
Is there a way to change the value property to something else and target the button text to style it?
A similar question was asked here on StackOverflow
Here is a quick link to their solution at Quirksmode.org
Is there a way to put text in a textbox but also allow the user to type something. I would like to write "username:" inside the box and allow the user to type after the colon. I can do this the hard way by creating a div right next to a textbox and make it look like they are one container, but I was wondering if there was an easier way? Thanks
EDIT: I don't want to text to disappear. I just want to user to be able to continue typing
EDIT 2: the reason you cant put a value in the textbox is because its a form. when the user types a username next to the value it will submit together
HTML5 has a placeholder attribute you can now use:
<input type="text" placeholder="username" />
People have also created javascript functions that mimic this functionality.
There's also a jQuery placeholder plugin which does the same, if you'd like to go that route.
What's wrong with using standard HTML? You don't say that you need it to disappear...
<input type="text" value="username: " />
If you need it to disappear, use a placeholder attribute and a jQuery plugin as a fallback (for the browsers that don't support it.
You could do something like this:
<div>
<label>Username:</label>
<input type="text" />
</div>
CSS
div{border:1px solid gray;}
label{font-family:arial; font-size:.8em;}
input{border:none;}
input:focus{outline:none;}
Basically, created a containing div and placed a label and input in that div. label is the words that stay in the field. input has the border removed.
http://jsfiddle.net/jasongennaro/rZmFx/
Fyi... you may need to increase the size of the input, depending on how many characters you want to accept.
<input type="text" placeholder="Category"/>
Maybe that can help you. If you want the textbox for only read you can put the property readonly = "".
You could call this javascript function once the page is loaded:
function add(text){
var TheTextBox = document.getElementById("Mytextbox");
TheTextBox.value = TheTextBox.value + text;
}
If you are using HTML5, you can use the placeholder attribute.
http://www.w3schools.com/html5/att_input_placeholder.asp
I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload
I have a bunch of optional "write-in" values for a survey I'm working on.
These are basically a radio button with a textbox within the answer field - the idea being that you would toggle the button and write something into the box.
What I'd like to do is have the radio button toggled whenever a user clicks in the text field - this seems like a use-case that makes a lot of sense.
Doing this:
<input type="radio" id="radiobutton"><label for="radiobutton">Other: <input type="text" id="radiobutton_other"></label>
works fine in Chrome (and I am guessing, other WebKit browsers as well), but there are weird selection issues in Firefox, so I'm assuming its a non-standard practice that I should stay away from.
Is there a way to replicate this functionality without using JavaScript? I have an onclick function that will work, but we're trying to make our site usable for people who might have NoScript-type stuff running.
Putting an input inside a label actually has a slightly different meaning. It doesn't make the input itself a label, it implicitly associates the label with the input in the same way as if they were linked by a for/id.
However, this only happens when the label doesn't already have a for attribute to override that (see HTML4 s17.9: “When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.”). It is unclear according to spec what should happen when both containment and for are present.
(And also it doesn't work in IE, which makes the point moot in practical terms.)
No, you'll need some scripting for this.
<input type="radio" id="radiobutton">
<label for="radiobutton_other">Other:</label>
<input type="text" id="radiobutton_other">
<script type="text/javascript">
var other= document.getElementById('radiobutton_other');
other.onchange=other.onkeyup= function() {
if (this.value!=='')
document.getElementById('radiobutton').checked= true;
};
</script>
It (an input inside a label) validates just fine as HTML 4.01. One potential issue I can see with your code is that both radio elements have the same ID in your example. Element IDs must be unique in HTML and XHTML documents and you should use the name attribute instead to identify a radio group.
If you are still having trouble after changing this, you will have to move the input outside of the <label> element and use scripting.