1

How do I position the file input button on the right hand side inside the textfield this is my fiddle http://jsfiddle.net/cancerian73/TurGw/

this is how i want as attached a screen shotenter image description here

input[type=file] {
-webkit-appearance: textfield;
position: relative;
-webkit-box-sizing: border-box;
 }
 input[type=file]::-webkit-file-upload-button {
width: 0;
padding: 0;
margin: 0;
-webkit-appearance: none;
border: none;
 }
 /* "x::-webkit-file-upload-button" forces the rules to only apply to browsers that support this pseudo-element */
  x::-webkit-file-upload-button, input[type=file]:after {
content:'Browse...';
display: inline-block;
left: 100%;
margin-left:3px;
position: relative;
-webkit-appearance: button;
padding: 3px 8px 2px;
 }
San
  • 1,237
  • 1
  • 14
  • 29
  • Does this need to be WebKit specific or something? You have a lot of `-webkit-*` rules in there, which makes this look *completely different* in, say, Firefox. If so, you should probably put a tag for that on your question. – ajp15243 Sep 20 '13 at 13:16
  • You may want to see [this](http://stackoverflow.com/questions/572768/styling-an-input-type-file-button) post or [this](http://stackoverflow.com/questions/4532733/styling-input-type-file) post. – John Lieb-Bauman Sep 20 '13 at 13:19
  • @ajp15243: Yup, correct point. From the comment in the CSS, I assumed that it is required only for Webkit based browsers. Not sure now :( – Harry Sep 20 '13 at 13:25

1 Answers1

4

You just 'fake' a border

Fiddle: http://jsfiddle.net/TurGw/3/

Html:

<form action="" method="post">
    <div class='upload-border'>
        <input type="file" name="upload"/>
    </div>
</form>

Css:

.upload-border{
    border:1px solid black;
    width:315px;
}
input[type=file]::-webkit-file-upload-button {
    width: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    border: none;
    border:0px;
}

 x::-webkit-file-upload-button, input[type=file]:after {
    content:'Browse...';
    left: 100%;
    margin-left:3px;
    position: relative;
    -webkit-appearance: button;
    padding: 3px 8px 2px;
    border:0px;
}
Mordalthunder
  • 256
  • 1
  • 3