使圖像成爲提交按鈕的問題

我正在嘗試使提交按鈕變成箭頭，但是具有背景。就像這樣：使圖像成爲提交按鈕的問題

我是能夠得到提交按鈕出現在輸入，但是，它不佔用它的全高出於某種原因。我上傳了一個圖像到我的服務器上，就像例子中的箭頭一樣，但是每當我將背景圖像取消註釋並且不重複時，它就不會對背景圖像執行任何操作。我不確定我是否正在討論這項權利。我看了這裏的其他問題，我不能工作。

任何想法爲什麼這不起作用？

#footer-grid1-newsletter-input { 
 
\t margin-top: 15px; 
 
\t width: 80%; 
 
\t height: 20px; 
 
\t padding: 8px 5px; 
 
} 
 
#footer-grid1-newsletter-submit { 
 
\t /*background:url(http://optimumwebdesigns.com/icons/right-arrow.png); 
 
\t background-repeat: no-repeat;*/ 
 
\t height: 39px; 
 
\t margin-left: -54px; 
 
\t width: 50px; 
 
\t border: 0; 
 
\t background: #0085A1; 
 
\t color: #FFF: 
 
    -webkit-appearance: none; 
 
\t cursor: pointer; 
 
} 
 
#footer-grid1-newsletter-submit:hover { 
 
\t background: rgb(69,186,149); 
 
}

<input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address"> 
 
\t <input type="submit" id="footer-grid1-newsletter-submit" name="submit">

來源

2016-02-28 Ralph

你通過_it的意思並沒有對背景圖像什麼。 _？ – Rayon

剛剛給出的答案几乎就是我正在尋找的東西，除非有辦法讓箭頭懸停在提交按鈕上。 – Ralph

使用background-color（的background特定財產）財產超過:hover彷彿我們用background，它將覆蓋所有background性能

試試這個：

#footer-grid1-newsletter-input { 
 
    margin-top: 15px; 
 
    width: 80%; 
 
    height: 20px; 
 
    padding: 8px 5px; 
 
} 
 
#footer-grid1-newsletter-submit { 
 
    background: url('http://optimumwebdesigns.com/icons/right-arrow.png') #0085A1 center center; 
 
    background-repeat: no-repeat; 
 
    height: 39px; 
 
    margin-left: -54px; 
 
    width: 50px; 
 
    border: 0; 
 
    cursor: pointer; 
 
} 
 
#footer-grid1-newsletter-submit:hover { 
 
    background-color: rgb(69, 186, 149) 
 
}

<input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address"> 
 
<input type="submit" id="footer-grid1-newsletter-submit" name="submit" value='&nbsp'>

來源

2016-02-28 04:16:26 Rayon

完美，謝謝！ – Ralph

-1

提交按鈕0只需設置opacity屬性是完全透明的。

來源

2016-02-28 04:27:10

而不是試圖使用背景圖像嘗試圖像輸入。

<input type="image" id="footer-grid1-newsletter-submit" src="http://optimumwebdesigns.com/icons/right-arrow.png" name="submit">

編輯

試試這個的jsfiddle：https://jsfiddle.net/j031/ydc68y0a/

來源

2016-02-28 04:30:19 Joel

而不是使用<input type="submit">的，使用<button type="submit"></button>並把你的圖片按鈕內。另外，使用Unicode箭頭在這個例子：

window.onload = function() { 
 
    var form = document.getElementById('form'); 
 
    form.onsubmit = function(e) { 
 
    e.preventDefault(); 
 
    var result = document.getElementById('result'); 
 
    result.value = 'Form Submitted!'; 
 
    } 
 
}

div.input { 
 
    border: none; 
 
    width: 20rem; 
 
    border: 2px solid black; 
 
    margin: 1rem 0; 
 
} 
 

 
input { 
 
    display: block; 
 
    float: left; 
 
    border: none; 
 
    padding: 0 0.5rem; 
 
    margin: 0; 
 
    line-height: 2rem; 
 
    width: 18rem; 
 
    box-sizing: border-box; 
 
} 
 

 
button { 
 
    background-color: #0074D9; 
 
    border: none; 
 
    color: white; 
 
    line-height: 2rem; 
 
    font-weight: bold; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 2rem; 
 
    height: 2rem; 
 
    box-sizing: border-box; 
 
} 
 

 
label::after { 
 
    content: ''; 
 
    display: block; 
 
} 
 

 
#result { 
 
    width: 20rem; 
 
    height: 5rem; 
 
}

<form id="form"> 
 
    <div class="input"> 
 
    <input id="email" type="email" placeholder="Your Email Address..." required> 
 
    <button id="submit" type="submit">&#10142;</button> 
 
    </div> 
 
    <label for="result">Result:</label> 
 
    <textarea id="result"></textarea></result> 
 
</form>

來源

2016-02-28 04:53:35 Vince

使圖像成爲提交按鈕的問題

回答

相關問題