This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the best way to replace the file browse button in html?
How to style “input file” with CSS3 / Javascript?
Is possible to change the style of <input type='file' /> ?
If yes , how to change? chrome shows file name which i have been chosen in file browse input.
How to Hide file name in file browse input?
Asked before:
How can I style a file input field in Firefox?
Styling an input type="file" button
How to style "input file" with CSS3 / Javascript?
Styling <input type="file">
Change cursor type on input type="file"
https://stackoverflow.com/questions/3984815/jquery-best-way-to-style-a-input-file-tag
how can i style input file textbox?
If you had search it then it would have given you the best possible answers from StackOverflow itself.
Hope it will work !
No, it cannot be changed.
However there is a trick widely circulated around the web. The idea is to give the <input type="file"/> an opacity value of 0.1 and position it on top of an image. For all practical purposes it will be invisible and only the picture will be visible, but it will receive mouse clicks. With some Javascript then you can show the selected file name(s) elsewhere on the page.
You can do with few lines of javascript. Here is the sample demo http://jsfiddle.net/eyjsF/
Related
This question already has answers here:
<button> vs. <input type="button" />. Which to use?
(16 answers)
Closed 2 years ago.
I'm a little confused. What is the difference between these. Please don't reference really old postings. I notice that accessing some of the styles are different inline in html as well as in style sheets.
<input type=button>
vs
<button>
I guess I'm wondering which one will out live which?
or which is the best when taking into account ease of compatibility between all the general technologies that go into website creation? aka. which is going to cause the least amount of trouble
Unlike <input> tags, <button>'s can contain other html elements as their labels. <input type="button"> can only accept a string as its label text (css styles not withstanding).
Additionally, the <button> element accepts a wide range of uncommon but useful attributes regarding multiple forms and click actions. See the MDN page for more details.
As for one "out living" the other, the HTML standard is remarkably backwards compatible. Humanity will put men on Mars before either is eliminated from the HTML standard.
Inside a <button> element you can put content, like text or images.
eg: <button type="button" onclick="alert('Hello world!')">Click Me!</button>
If you use the <button> element in an HTML form, different browsers may submit different values. So always use <input type="button"> to create buttons in an HTML form.
input type=button
The tag is the easiest way to submit a form. When a customer clicks on the button, it submits automatically. You don't need to add any scripts, the browsers know to submit the form when a submit INPUT tag is clicked.
The problem is that this button is very ugly and plain. You can't add images to it. You can style it just like any other element, but it can still feel like an ugly button.
Use the INPUT method when your form has to be accesible even in browsers that have JavaScript turned off.
button
The BUTTON element offers more options for submiting forms. You can put anything inside a BUTTON element and turn it into a submit button. Most commonly people use images and text. But you could create a DIV and make that entire thing a submit button if you wanted to.
The biggest drawback to the BUTTON element is that it doesn't automatically submit the form. This means there needs to be some type of script to activate it. And so it is less accessible than the INPUT method. Any user who doesn't have JavaScript turned on won't be able to submit a form with only aBUTTON element to submit it.
Use the BUTTON method on forms that are not as critical. Also, this is a great way to add additional submission options within one form.
Source: https://www.thoughtco.com/buttons-on-forms-3464313
Use <button> from input element if you want to create button in a form.
And use button tag if you want to create button for an action.
More Info: Difference between <input type='submit' /> and <button type='submit'>text</button>
depends where you want to use it. input should be inside form, where button can be used anywhere.
I'm trying to make a file sharing website but having trouble styling the upload forms I have as my design is quite advanced instead of setting the indivdual styles i'm trying to get set the design as a background image.
This is my design - http://icap.me/i/s5YIbheY3g.png
This is it currently effort - http://icap.me/i/ODuzJOQMhS.png
So far I set the style of the upload button by using the following code -
form input[type=submit] {
background : url("../img/upload.png") no-repeat center center;
width : 115px;
height :52px;
border : none;
color : transparent;
font-size : 0
}
do you know how I could use an image to style my other form buttons here is the html -
<form action="upload_file.php" method="post"enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
<input type="checkbox" name="vehicle" value="Bike">I agree to the terms and conditions<br>
</form>
Styling some form elements suck, and unfortunately, the file element is one of those elements. This is because the browser actually derives the control itself from the operating system (which means you have absolutely no control over how it looks). What this means for you is that in order to style it, you will need JavaScript and some CSS hackary.
Quirksmode has a great step by step for doing it, at least to get you started.
The basics of which, though, are:
Style your normal file input with position: relative.
Add a new plain old text input and position it on top of the file input.
Style the text input to look like the file input
Drop the file input's opacity to 0, so that it's invisible, but still clickable (this is key, because you're still actually using the file input)
Use JavaScript to put the filename into the text input
This one's kind of primitive and not very standards-compliant (extra elements and all that). If you're already using a JavaScript library (jQuery, MooTools, etc), you may be able to find a plugin that will handle the control itself, and you just add styling to that. The advantage to this method is that you won't necessarily need to add extra elements yourself (so you don't have a stray input field lying around), and the JavaScript (ideally) picks up the presence of your file input(s) and "fixes" them accordingly.
For styling browse button you need to take help of css-javascript duo or something like twitter bootstrap which just works out of the box1..
Also, check this post and this article
As a personal view, i feel that form elements like browse button and drop-down menus shouldn't be tweaked much..giving out two benefits..one, faster developments..and two, cross-browser symmetry..
In HTML input file type attribute, how to make file path right justified, which I am getting by browsing?
<input type=file id='id' class='file' />
$('#id').css('text-align','right')
is not working.
I tried
$('#id').attr('style','text-align:right');
But no use. If I use class instead of id then also it is not working
you cant modify the style of the input file , but you can use other methods to style it indirectly..
Try this one out.
http://www.quirksmode.org/dom/inputfile.html
http://www.kavoir.com/2009/02/styling-file-upload-select-input-control-input-typefile.html
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How do I make an HTML text box show a hint when empty?
A very simple question. I would like to place a tooltip within a Textbox similar to the StackOverflow log in. I want the word discount on the textbox value and when the user enters a new value, the word "discount" disappears from the Textbox.
Can I do this by myself using events like OnBlur, OnChange, etc (I don't know which)? Or there is something around that is already done?
Thanks
As said by rudeovski, you can use placeholder in modern browsers.
But for the older one, you'll need a javascript/jQuery fallback.
Here is a good example:
http://uniquemethod.com/html5-placeholder-text-with-modernizr-and-jquery-fallback
This will generate placeholder fallback for you automaticly. You simply have to write:
<input type="text" id="discount" placeholder="discount" />
Modernizr combined with jQuery will do the rest for you.
Hope this help :)
You can use placeholder text for this.
<input type="text" id="discount" placeholder="discount" />
To make it work on all browsers, you need to use jquery/javascript for it. As far as i know, it doesn't work in IE.
maybe a little odd, but I'm stuck nevertheless:
I have an input type="image" which acts as a button within a software. I have to tweak the button for a template.
<input class="tweaked" src="" title="add to basket" alt="add to basket" type="image">
The problem:
I cannot change the type, because the software seems to "bind" to input type="image"
If I just omit the src attribute I get failed to load on IE and other browser
Question:
Is it possible to have an input type="image" without src attribute looking nice across browsers, that is without the "failed to load image"-icon? If so, how can it be done?
Thanks for help.
One option is to make the source of the image be a 1x1 clear pixel PNG. It's quick and dirty, and it will most likely work. You may even already have such a file that the site is downloading.
If, however, you don't want to add another HTTP request, perhaps you can set the source to be your image sprite, then in your CSS align the background so that the sprite is way, way off the image. This will get rid of the 1x1clear.png file, but it may degrade in a weird way in some cases.
Wacky idea that probably won't work, but you can try using a css (or jquery) selector to look for a missing src tag and set it to css display: none or add a temp src tag pointing to a dummy image.