I saw some results via the related questions but didn't actually seem to show what I want.
Looking for a way to simply style the button in all major broswers easily.
<input type="file" name="file" id="file" size="29" class="formButton" />
<span class="smalltext">(.txt only)</span>
I want the browse button to use the CSS, I have seen some results that put a fake button on top of the real one, is that really the best approach to take?
Currently, there's no way to consistently style a file input field across browsers. You could use one of the various "tricks" out there (which as you mentioned simply overlay the button), but beware that you might interfere with keyboard access to the field.
Don't try this!
Even if you get it working, there's still browsers like Safari that use non-standard file selection widgets!
It's best to let the native file widget show through.
The best solution I've found is to either overlay your own as you've mentioned, or use something like Dojo, which effectively does the same thing. As far as I know, you can't style the file input button.
Actually, with JqueryUI you can do it by simply:
Javascript for rollover (not required):
$(".fg-button:not(.ui-state-disabled)")
.hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
)
Button Code:
<input type="submit" name="something" id="something" value="Submit" class="fg-button ui-state-default ui-corner-all">
Not that due to IE being a Microsoft product, the rounded corners gracefully degrade.
Related
This question already has answers here:
Difference between <input type='button' /> and <input type='submit' />
(4 answers)
Closed 1 year ago.
input type="submit" and button tag are they interchangeable? or if there is any difference then When to use input type="submit" and when button ?
And if there is no difference then why we have 2 tags for same purpose?
http://www.w3.org/TR/html4/interact/forms.html#h-17.5
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. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
So for functionality only they're interchangeable!
(Don't forget, type="submit" is the default with button, so leave it off!)
The <input type="button" /> is just a button and won't do anything by itself.
The <input type="submit" />, when inside a form element, will submit the form when clicked.
Another useful 'special' button is the <input type="reset" /> that will clear the form.
Although both elements deliver functionally the same result *, I strongly recommend you use <button>:
Far more explicit and readable. input suggests that the control is editable, or can be edited by the user; button is far more explicit in terms of the purpose it serves
Easier to style in CSS; as mentioned above, FIrefox and IE have quirks in which input[type="submit"] do not display correctly in some cases
Predictable requests: IE has verying behaviours when values are submitted in the POST/GET request to the server
Markup-friendly; you can nest items, for example, icons, inside the button.
HTML5, forward-thinking; as developers, it is our responsibility to adopt to the new spec once it is officialized. HTML5, as of right now, has been official for over one year now, and has been shown in many cases to boost SEO.
* With the exception of <button type="button"> which by default has no specified behaviour.
In summary, I highly discourage use of <input type="submit"/>.
Use <button> tag instead of <input type="button"..>. It is the advised practice in bootstrap 3.
http://getbootstrap.com/css/#buttons-tags
"Cross-browser rendering
As a best practice, we highly recommend using the <button> element
whenever possible to ensure matching cross-browser rendering.
Among other things, there's a Firefox bug that prevents us from
setting the line-height of <input>-based buttons, causing them to not
exactly match the height of other buttons on Firefox."
<input type='submit' /> doesn't support HTML inside of it, since it's a single self-closing tag. <button>, on the other hand, supports HTML, images, etc. inside because it's a tag pair: <button><img src='myimage.gif' /></button>. <button> is also more flexible when it comes to CSS styling.
The disadvantage of <button> is that it's not fully supported by older browsers. IE6/7, for example, don't display it correctly.
Unless you have some specific reason, it's probably best to stick to <input type='submit' />.
I realize this is an old question but I found this on mozilla.org and think it applies.
A button can be of three types: submit, reset, or button. A click on a
submit button sends the form's data to the web page defined by the
action attribute of the element. A click on a reset button
resets all the form widgets to their default value immediately. From a
UX point of view, this is considered bad practice. A click on a button
button does... nothing! That sounds silly, but it's amazingly useful
to build custom buttons with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish
<button> is newer than <input type="submit">, is more semantic, easy to stylize and support HTML inside of it.
While the other answers are great and answer the question there is one thing to consider when using input type="submit" and button. With an input type="submit" you cannot use a CSS pseudo element on the input but you can for a button!
This is one reason to use a button element over an input when it comes to styling.
I don't know if this is a bug or a feature, but there is very important (for some cases at least) difference I found: <input type="submit"> creates key value pair in your request and <button type="submit"> doesn't. Tested in Chrome and Safari.
So when you have multiple submit buttons in your form and want to know which one was clicked - do not use button, use input type="submit" instead.
If you are talking about <input type=button>, it won't automatically submit the form
if you are talking about the <button> tag, that's newer and doesn't automatically submit in all browsers.
Bottom line, if you want the form to submit on click in all browsers, use <input type="submit">
This question already has answers here:
Difference between <input type='button' /> and <input type='submit' />
(4 answers)
Closed 1 year ago.
input type="submit" and button tag are they interchangeable? or if there is any difference then When to use input type="submit" and when button ?
And if there is no difference then why we have 2 tags for same purpose?
http://www.w3.org/TR/html4/interact/forms.html#h-17.5
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. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
So for functionality only they're interchangeable!
(Don't forget, type="submit" is the default with button, so leave it off!)
The <input type="button" /> is just a button and won't do anything by itself.
The <input type="submit" />, when inside a form element, will submit the form when clicked.
Another useful 'special' button is the <input type="reset" /> that will clear the form.
Although both elements deliver functionally the same result *, I strongly recommend you use <button>:
Far more explicit and readable. input suggests that the control is editable, or can be edited by the user; button is far more explicit in terms of the purpose it serves
Easier to style in CSS; as mentioned above, FIrefox and IE have quirks in which input[type="submit"] do not display correctly in some cases
Predictable requests: IE has verying behaviours when values are submitted in the POST/GET request to the server
Markup-friendly; you can nest items, for example, icons, inside the button.
HTML5, forward-thinking; as developers, it is our responsibility to adopt to the new spec once it is officialized. HTML5, as of right now, has been official for over one year now, and has been shown in many cases to boost SEO.
* With the exception of <button type="button"> which by default has no specified behaviour.
In summary, I highly discourage use of <input type="submit"/>.
Use <button> tag instead of <input type="button"..>. It is the advised practice in bootstrap 3.
http://getbootstrap.com/css/#buttons-tags
"Cross-browser rendering
As a best practice, we highly recommend using the <button> element
whenever possible to ensure matching cross-browser rendering.
Among other things, there's a Firefox bug that prevents us from
setting the line-height of <input>-based buttons, causing them to not
exactly match the height of other buttons on Firefox."
<input type='submit' /> doesn't support HTML inside of it, since it's a single self-closing tag. <button>, on the other hand, supports HTML, images, etc. inside because it's a tag pair: <button><img src='myimage.gif' /></button>. <button> is also more flexible when it comes to CSS styling.
The disadvantage of <button> is that it's not fully supported by older browsers. IE6/7, for example, don't display it correctly.
Unless you have some specific reason, it's probably best to stick to <input type='submit' />.
I realize this is an old question but I found this on mozilla.org and think it applies.
A button can be of three types: submit, reset, or button. A click on a
submit button sends the form's data to the web page defined by the
action attribute of the element. A click on a reset button
resets all the form widgets to their default value immediately. From a
UX point of view, this is considered bad practice. A click on a button
button does... nothing! That sounds silly, but it's amazingly useful
to build custom buttons with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish
<button> is newer than <input type="submit">, is more semantic, easy to stylize and support HTML inside of it.
While the other answers are great and answer the question there is one thing to consider when using input type="submit" and button. With an input type="submit" you cannot use a CSS pseudo element on the input but you can for a button!
This is one reason to use a button element over an input when it comes to styling.
I don't know if this is a bug or a feature, but there is very important (for some cases at least) difference I found: <input type="submit"> creates key value pair in your request and <button type="submit"> doesn't. Tested in Chrome and Safari.
So when you have multiple submit buttons in your form and want to know which one was clicked - do not use button, use input type="submit" instead.
If you are talking about <input type=button>, it won't automatically submit the form
if you are talking about the <button> tag, that's newer and doesn't automatically submit in all browsers.
Bottom line, if you want the form to submit on click in all browsers, use <input type="submit">
I've code like given below:
<label>
<input type="hidden" name="styless" value="9">
<input type="radio" style="display:none" >Qwerty
</label>
This is working fine on all browsers except Internet Explorer. How do I display the radio button in the IE browser, and make it remain hidden on other browsers?
What happens in IE is when I click on "Qwerty", the click event is not fired.
So i want to remove display:none in IE only.
Generally you shouldn't try to make page behavior browser-specific. I would argue that a much better solution would be to make the "Qwerty" text click act the same way on all browsers.
You can do it with JavaScript - wrap the text in a <span> element, and give it an onclick event which would check your radio button. To find the radio button reliably, you should give it an id attribute. Then call preventDefault on the click event, to avoid any unwanted behavior which may or may not happen otherwise.
Your final HTML should look like this:
<label>
<input type="hidden" name="styless" value="9">
<input type="radio" style="display:none" id="qwerty-radio-box">
<span onclick="document.getElementById('qwerty-radio-box').checked = true; event.preventDefault();">Qwerty</span>
</label>
In your question, you didn't mention whether or not your project already has a JavaScript codebase. If it does, you should move the JavaScript code there, instead of keeping it in this onclick event attribute. If it doesn't, and this is the only usage, I'd say it's fine leaving it here.
You can use $.browser property, you can do it using jQuery Migrate plugin (for JQuery >= 1.9 - in earlier versions you can just use it) and then do something like this:
if (!$.browser.msie){
// do something
}
i have an input tag...
<input type="file" name="upload">
for browsing it makes the button vith value "browse"(in mozilla)
the question is: how can i change the name of that button? i want it to have the name "select" instead of "browse".
Thanks
Unfortunately the button text of an <input type="file"> is controlled by the browser, and cannot be changed, as far as I know.
In general, fancy file uploaders are often flash-based. However, if you are ready for a challenge, you may want to check out the following QuirksMode article for a few CSS + JavaScript tricks in this direction:
QuirksMode: Styling an input type="file"
I haven't tried, but can you set the input to display:none and then use background images?
I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.