CSS：如何使自定义文件上传按钮全宽（按钮作品）

我是新来的CSS，并希望有人能帮助我。CSS：如何使自定义文件上传按钮全宽（按钮作品）

我想简单的自定义样式适用于文件上传按钮（作为HTML表单的一部分），使它看起来类似于其他按钮我的网页上，并得到同样的目光交叉-browser。

到目前为止，我有以下按预期工作。我现在唯一的问题是，我想按钮到采取其父母分区的全长（在我的情况下，这将跨越页面的9/12（'col-9'））。

我试着将width: 100%;添加到CSS，但然后该按钮不再工作。

我的HTML：

<div class="col-3 frmCaption">Attachments:</div> 
<div class="col-9"> 
    <div class="customUpload btnUpload btnM"> 
     <span>Upload files</span> 
     <input type="file" class="upload" /> 
    </div> 
</div>

我的CSS：

.btnDefault, .btnUpload { 
    background-color: #FFFFFF; 
    border: 1px solid #CCCCCC; 
    color: #333333; 
    cursor: pointer; 
    font-weight: 400; 
    display: inline-block; 
    padding: 6px 12px; 
    text-align: center; 
    text-decoration: none; 
    vertical-align: middle; 
}  
.btnDefault:focus, .btnDefault:hover, .btnUpload:focus, .btnUpload:hover { 
    background-color: #E6E6E6; 
} 
.btnM { 
    border-radius: 4px; 
    font-size: 14px; 
    padding: 6px 12px; 
} 
.customUpload { 
    overflow: hidden; 
    position: relative; 
} 
.customUpload input.upload { 
    cursor: pointer; 
    margin: 0; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    padding: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
}

来源

2015-05-29 keewee279

您可以创建一个小提琴吗？ –

款式投入要素，实际上你需要它的样式元素label。

从MDN，

的HTML标签元素（）表示用于在用户界面中的项目的标题。它可以是关联的，通过将控件元素放置在元素中或通过使用for属性进行控制。这种控制称为标签元素的标签控制。

因此，无论何时单击label，都会触发附加的输入。

所以，只需将输入元素包装在标签中而不是div中，并尽可能多地伸展即可。这将解决您的问题。

.btnDefault, 
 
.btnUpload { 
 
    background-color: #FFFFFF; 
 
    border: 1px solid #CCCCCC; 
 
    color: #333333; 
 
    cursor: pointer; 
 
    font-weight: 400; 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
} 
 
.btnDefault:focus, 
 
.btnDefault:hover, 
 
.btnUpload:focus, 
 
.btnUpload:hover { 
 
    background-color: #E6E6E6; 
 
} 
 
.btnM { 
 
    border-radius: 4px; 
 
    font-size: 14px; 
 
    padding: 6px 12px; 
 
} 
 
.customUpload { 
 
    overflow: hidden; 
 
    position: relative; 
 
    display: block; 
 
} 
 
.customUpload input.upload { 
 
    cursor: pointer; 
 
    margin: 0; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    padding: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}

<div class="col-3 frmCaption">Attachments:</div> 
 
<div class="col-9"> 
 
    <label class="customUpload btnUpload btnM"> <span>Upload files</span> 
 

 
    <input type="file" class="upload" /> 
 
    </label> 
 
</div>

Working Fiddle

来源

2015-05-29 06:17:43

真的需要'标签吗？我能够让它在'div'上工作。我错过了什么？ –

@Rohit给输入和包装器提供'width：100％'explicity，这就是它工作的原因。但建议使用标签来根据需要设置输入的样式。因为它精确处理。正如你所看到的，就我而言，我并不在乎输入的宽度是多少。 –

是的，你是对的，我不能让它工作，除非我在按钮和它的容器上都有宽度。谢谢@Mr_Green –

您需要width属性适用于含<div>为好。一旦div具有完整的尺寸，那么只有里面的按钮可以具有完整的宽度。

为了简单起见，我对html进行了更改，您可以将其移至相应的类。

<div class="col-3 frmCaption">Attachments:</div> 
<div class="col-9"> 
    <div class="customUpload btnUpload btnM" style="width:100%;"> 
     <span>Upload files</span> 
     <input type="file" class="upload" style="width:100%;"/> 
    </div> 
</div>

JS Fiddle

或者你可以用这个CSS andadd它既能您的div和文件上传，

.fullwidth 
{ 
    width : 100%; 
} 

<div class="col-3 frmCaption">Attachments:</div> 
<div class="col-9"> 
    <div class="customUpload btnUpload btnM fullwidth"> 
     <span>Upload files</span> 
     <input type="file" class="upload fullwidth"/> 
    </div> 
</div>

来源

2015-05-29 06:13:19

更新：在看着Mr_Green的小提琴并测试他的代码之后，我决定采用他的解决方案，因为我认为这是更专业的方法，并且效果很好（你的建议非常棒，因为他你我完全是我在寻找的第一名）。再次感谢！ – keewee279

是@Mr_Green有更好的答案。 –

使按钮取12周的cols（如您使用的是12山坳系统），因为这是获得CILS的最大数量，以这种方式， elemts将占用它所包含的div的大小

来源

2015-05-29 06:18:32

CSS：如何使自定义文件上传按钮全宽（按钮作品）

回答

相关问题