Как поместить кнопку ввода файла с правой стороны в текстовое поле, это моя скрипка http://jsfiddle.net/cancerian73/TurGw/
это как я хочу, как прикрепленный экранный снимок
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;
}
Вы просто "подделываете" границу
Скрипт: 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;
}