如何将文本输入按钮放置在文本框的右侧 [英] How do I position the file input button on the right hand side inside the textfield

问题描述

如何将文本输入按钮放置在文本框右侧
这是我的小提琴

Html：

 < ; form action =method =post> 
< div class ='upload-border'> 
< input type =filename =upload/> 
< / div> 
< / form> 
  

Css：

  .upload-border {
 border：1px纯黑色; 
 width：315px; 
} 
 input [type = file] ::  -  webkit-file-upload-button {
 width：0; 
 padding：0; 
保证金：0; 
 -webkit-appearance：none; 
 border：none; 
 border：0px; 
 
 
 :: webkit-file-upload-button，input [type = file]：after {
 content：'Browse ...';剩余
：100％; 
 margin-left：3px; 
职位：亲属; 
 -webkit-appearance：button; 
 padding：3px 8px 2px; 
 border：0px; 
} 
  

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 shot

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;
 }

解决方案

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;
}

这篇关于如何将文本输入按钮放置在文本框的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！