I want to customize (want change background and color etc) the browse button in upload file field.
<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13">
You can't. You have to create your own button and trigger the actual input.
Here you can do this using jQuery. See working example.
HTML:
<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Upload File</div>
jQuery:
$("#uploadTrigger").click(function(){
$("#uploadFile").click();
});
CSS:
.hidden {
display:none;
}
.button {
border: 1px solid #333;
padding: 10px;
margin: 5px;
background: #777;
color: #fff;
width:75px;
}
.button:hover {
background: #333;
cursor: pointer;
}
The basic premise behind styling file input buttons is to overlay absolutely positioned controls over the file upload. The file uploads opacity is set to 0, causing it not to show. Its z-index is set above the overlaid controls, while the z-index of the controls is set lower than the file upload. So when the user thinks they are clicking the overlaid controls they are actually clicking the file upload with opacity set to 0.
Here is a really rough example:
HTML
<div id="file-upload-cont">
<input id="original" type="file"/>
<div id="my-button">Find</div>
<input id="overlay"/>
</div>
CSS
#my-button{
position: absolute;
border: 1px solid black;
background: green;
padding 3px;
width: 50px;
height: 25px;
text-align: center;
left: 148px; /* Positioning over file-upload */
top: 0px;
z-index: 1; /* Lower z-index causes controls to sit under file upload */
}
#overlay{
position: absolute;
z-index: 1; /* Lower z-index causes controls to sit under file upload */
left: 0; /* Positioning over file-upload */
}
#original{
opacity: 0; /* Opacity makes it invisible*/
position: relative;
z-index: 100; /* z-index causes original file upload to sit above other controls*/
}
#file-upload-cont{
position: relative;
}
Working Example http://jsfiddle.net/tP8KY/1/
you cannot directly customize the browse button. your CSS won't work upon it.
What you can do is, you can create a button of yours with a textbox to the left of it. customize it, and upon click, trigger the original file upload.
see this link and this
Check the following for the changes in browse button:
Browse button css
Browse button design
Hope these links will help you.
Related
I have an asp button with certain style. but when i apply the same style to asp file upload control, only background change to that style. The browse button is still the same.
Asp code is
<div>
Please Select Excel File:
<asp:FileUpload ID="fileuploadExcel" runat="server" CssClass="addkey_btn" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" OnClientClick="showDivPageLoading();" CssClass="addkey_btn" />
</div>
CSS is
.addkey_btn {
background: none repeat scroll 0 0 #00B7CD;
border: 0 none;
color: #FFFFFF;
cursor: pointer;
font-family: 'Altis_Book';
font-size: 15px;
padding: 3px 15px;
}
I want to apply the same css to Browse button as in Upload button. Any suggestions?
EDIT1
Any pure CSS way of doing this?
It is very difficult to style input[type=file] reliably across browsers. The only cross-browser solution is the one demonstrated by #Vitorino, using label and/or pseudo-elements to hide the actual input and then style that element/pseudo-element instead.
This answer doesn't repeat that, but offers a pure CSS alternative which is browser dependent. That said, this should not be used in production websites, this is just a proof-of-concept or a demo.
Modern browsers are implementing somewhat non-standard extensions to enable user-styling of hitherto nigh-impossible element features. This allows developers to override default user-agent stylesheet to a large extent.
Custom-extensions:
Specifically, for input[type=file] at least Trident (for IE-10 and above) and Webkit (for Chrome, Safari) allow styling of this element to some extent without resorting to hacks like hidden elements, or absolutely positioned pseudo-elements. For this case, the vendor-specific extensions of our interest are:
-webkit-appearance (to enable override of user-agent style in Webkit-based browsers)
::-webkit-file-upload-button (to enable styling of the browse button in Webkit browsers)
::-ms-browse (to enable styling of the browse button in Trident-based browsers, i.e. IE)
::-ms-value (to enable styling of text input in Trident browsers, i.e. IE)
Caveats:
Unfortunately, there are no -moz- extensions for this in Gecko/Mozilla based browsers. Specifically, at least Firefox doesn't allow styling of the browse button at all.
IE does not allow changing the position of the browse button from right to left. Has to be further verified, perhaps it is using -ms-flex to control that?
Demo:
Example Fiddle: http://jsfiddle.net/abhitalks/hxv19bbg/7/
Example Snippet:
The following snippet will work perfectly in IE-10/11 and Chrome-39 (that is what I tested against), but will not work with Firefox.
* { box-sizing: border-box; margin: 0; padding: 0; }
div { margin: 8px; }
input[type=file], input[type=file] + input {
display: inline-block;
background-color: #eee;
border: 1px solid gray;
font-size: 15px; padding: 4px;
}
input[type=file] + input {
padding: 13px;
background-color: #00b7cd;
}
::-webkit-file-upload-button {
-webkit-appearance: none;
background-color: #00b7cd;
border: 1px solid gray;
font-size: 15px; padding: 8px;
}
::-ms-browse {
background-color: #00b7cd;
border: 1px solid gray;
font-size: 15px; padding: 8px;
}
input[type=file]::-ms-value { border: none; }
<div>
<label>Select File: </label>
<input id="browse" type="file" />
<input class="btn" type="button" value="Submit" />
</div>
you can style label and place it on top of choose file button
.btn,
label.choose:before {
background: none repeat scroll 0 0 #00B7CD;
border: 0 none;
color: #FFFFFF;
cursor: pointer;
font-family: 'Altis_Book';
font-size: 15px;
padding: 3px 15px;
}
label.choose:before {
content: 'Choose file';
padding: 3px 6px;
position: absolute;
}
<div>
<label class="choose">
<input id="browse" type="file" />
</label>
<input class="btn" type="button" value="Submit" />
</div>
I was wondering if this is possible:
if I have an input field:
<input type="button" value="some value" class="icon-button" />
and it is styled with gradient background, border, box-shadow, etc.
I want to have the button like an Icon with all its style and the value-text right next to it.
I thought of something like this, but it didn't work:
.icon-button{
display:block;
width: 25px;
height: 25px;
/* gradients, borders, shadows, etc. */
text-indent: 30px;
overflow: visible;
}
Any Idea? I know I could solve it with javascript, but I would like to know if there is a css way to do this.
I don't think you're going to achieve this (at least not very neatly) using an input. If you can amend your markup to use an actual button to submit though, it's pretty trivial:
<button type="submit">Some value</button>
CSS:
button {
line-height: 25px;
border: none;
background: transparent;
cursor: pointer;
}
button::before {
content: '';
display:inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
margin-right: 3px;
/* gradients, borders, shadows, etc. */
background: red;
}
You could use a span rather than generated content if IE7 support is needed. This approach is not possible with an input, as that can't contain any elements, nor can it have generated content.
If you need to use an input, you could achieve the same thing by wrapping it in a span and styling that.
I have the following in my css:
.myclasss:hover {
background: url("images/arw_flogin2.png") no-repeat; border: none;
display: block;
width: 90px;
height: 50px;
}
and the following in my HTML:
<input type="image" title="" class="myclasss" src="images/arw_flogin1.jpg" />
If i change input type to submit it works but not when as image.
You need to use a background image in the non hover state. Use the following css along with an input of type="submit"
CSS
.myclasss {
background: url("images/arw_flogin1.png") no-repeat; border: none;
display: block;
width: 90px;
height: 50px;
}
.myclasss:hover {
background: url("images/arw_flogin2.png") no-repeat; border: none;
}
HTML
<input type="submit" class="myclasss" value="" />
When you use an input with type image, the image that you have set in the src attribute will be applied to the foreground. Therefore when you change the background on hover you won't see it because the src image is still there on the foreground.
The problem is that the SRC of the input tag is laid on top of the background.
Jrod's method will work, or you can combine the flogin1/2 images and use background-position: 0 90px to improve loading times.
When Googling this hurdle, it came up with a ton of info about how to apply css and different static buttons as rollovers, when using an image as a button in a form.
My question is, how would you go about changing the button for each mouse event (on the button) and if you are using ONE image for all states?
For example... I have the following HTML for my button
<input type="image" id="login_submit" name="login_submit" src="button_login.png" />
and seperate to this I have the following CSS that I used before...
#login_submit a {
outline: none;
text-indent: -5000px;
display:block;
margin-left: auto;
margin-right: auto;
width: 141px;
height: 36px;
background: url("button_login.png") 0 0 no-repeat;
}
#login_submit a:hover {
background-position: -141px 0;
}
#login_submit a:active {
background-position: -282px 0;
}
now obviously it won't work at the moment... so how would I go about it? I'm looking for a more 'pure' CSS solution so no JS to brighten the day.
or should I stick with having 2/3 separate buttons for each state?
Well the main problem seems to be that you are trying to style an anchor that is a child to "#login_submit" instead of just "#login_submit", try this:
#login_submit {
outline: none;
text-indent: -5000px;
display:block;
margin-left: auto;
margin-right: auto;
width: 141px;
height: 36px;
background: url("button_login.png") 0 0 no-repeat;
}
#login_submit:hover {
background-position: -141px 0;
}
#login_submit:focus {
background-position: -282px 0;
}
Good luck,
Leo
I had this problem too, but just solved it.
By using an input type="image" and adding a 1x1px blank (transparent) .png or .gif to the src of the form element. Then using CSS for setting the background as the double (or, in the above case, triple) rollover image. The form element uses the blank .png as image, but beneath it lies the CSS handled background image, showing a beautifully working rollover with submit button functionality across its height and width.
=)
Code is taken directly from my situation:
HTML:
<div class="formrow">
<input id="send" type="image" src="../blank.png" name="Submit" onclick="submit" alt="Send" />
</div>
CSS:
#send
{
height: 25px;
width: 107px;
overflow: hidden;
display: block;
float: right ;
background: url('../images/style/button-send.png');
}
#send:hover
{
background-position: 0 -25px;
}
I hope this helps. =)
By the way, for me this approach took care of the problems mentioned by svict4 as well. =)
My markup looks like so:
<p>
<select></select>
<input type="submit" id="submit" value="submit" name="submit" />
</p>
Here's the CSS:
//No specific styles for the select element nor inherited ones.
#submit {
background: url("images/img.png") no-repeat scroll 0 0 transparent;
border: 1px solid #FFFAEE;
cursor: pointer;
height: 34px;
margin-left: 30px;
width: 145px;
}
The issue is the submit button is a few pixels above the select element. Here's a screenshot:
This happens in Webkit browsers and IE but not in Firefox.
I copied your code into jsfiddle and the select and submit button align up nicely in ff,chrome and ie9.
http://jsfiddle.net/PTF3Q/
Apparently there's some code you're not supplying causing this - do you have a live url to the page?
If not, you could try: vertical-align: middle;