更改輸入類型='文件'的默認文本和樣式

-2

我有一個類型文件的輸入。 '選擇文件'將顯示在按鈕上，旁邊顯示'沒有選擇文件'。但是我想改變按鈕的顏色和按鈕的文字。更改輸入類型='文件'的默認文本和樣式

<form action="demo_form.asp"> 
    Select a file: <input type="file" name="img" class='customBtn'> 
    <input type="submit"/> 
</form>

我嘗試添加一些CSS

.customBtn input[type='file'] { 
    color:#f00 
}

可有一個人幫我在這？

來源

2015-02-23 Rajeshwar

你究竟試過了什麼？ – 2015-02-23 10:43:08

請檢查更新的小提琴鏈接。 – Rajeshwar 2015-02-23 10:45:46

大多數人使用javascript來改變它 – 2015-02-23 10:58:39

完整的示例：

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<style> 
label, input { 
    color: #333; 
    font: 14px/20px Arial; 
} 
h2 { 
    font-size: 16px; 
    font-weight: bold; 
    text-transform: uppercase; 
    margin: 0 0 1em; 
} 
label { 
    display: inline-block; 
    width: 5em; 
    padding: 0 1em; 
    text-align: right; 
} 

/* Hide the file input using 
opacity */ 
[type=file] { 
    position: absolute; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
input, 
[type=file] + label { 
    border: 1px solid #CCC; 
    border-radius: 3px; 
    text-align: left; 
    padding: 10px; 
    width: 150px; 
    margin: 0; 
    left: 0; 
    position: relative; 
} 
[type=file] + label { 
    text-align: center; 
    left: 7.35em; 
    top: 0.5em; 
    /* Decorative */ 
    background: #333; 
    color: #fff; 
    border: none; 
    cursor: pointer; 
} 
[type=file] + label:hover { 
    background: #3399ff; 
} 
</style> 
<form action="demo_form.asp"> 
    <input id="f02" type="file" placeholder="Add profile picture" /> 
    <label for="f02">Add profile picture</label> 

</form> 
<script> 

$("[type=file]").on("change", function(){ 
    // Name of file and placeholder 
    var file = this.files[0].name; 
    var dflt = $(this).attr("placeholder"); 
    if($(this).val()!=""){ 
    $(this).next().text(file); 
    } else { 
    $(this).next().text(dflt); 
    } 
}); 
</script> 

</html>

複製了http://codepen.io/nopr/pen/rpsnd

來源

2015-02-23 10:45:22 itzMEonTV

它仍然不能改變按鈕的樣式和文本。 http://jsfiddle.net/e5e0zhsb/3/ – Rajeshwar 2015-02-23 10:53:53

更新了我的回答:) – itzMEonTV 2015-02-23 11:19:37

-1

ID或類添加到您的輸入元素。爲我工作！

來源

2015-02-23 11:17:16

更改輸入類型='文件'的默認文本和樣式

回答

相關問題