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：如何使自定義文件上傳按鈕全寬（按鈕作品）

回答

相關問題