設計元素，以輸入和發送鍵結合

所以，我無意中發現了這個任務時，我的設計師做了以下...我對如何做到這一點設計元素，以輸入和發送鍵結合

enter image description here

我唯一的想法不知道我想是讓圖像是一個背景，然後讓輸入是非風格，或者說......說實話，我不知道如何解決這個問題，我想是這樣的：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
    .formish { 
     width: 308px; 
     height: 46px; 
     background: url('btn2.png'); 
     background-repeat: none; 
     position: relative; 
    } 

    .formish .btn { 
     position: absolute; 
     right: 3px; 
     top: 1px; 
     width: 60px; 
     height: 42px; 
     border: 0; 
     background: none; 
     color: none; 
    } 
    </style> 
</head> 
<body> 
<form class="formish"> 
    <input type="email" value=""> 
    <input type="submit" class="btn" value=""> 
</form> 
</body> 
</html>

這是工作sorta，不能讓文本字段正常工作。無法弄清楚如何添加圖像的jsfiddle，所以這裏的按鈕本身：

enter image description here

在此先感謝

來源

2014-02-20 John

你快到了！只需將電子郵件字段擴大一些，並賦予它透明的背景顏色，或者與設計人員使用相同的淺灰色。 – timing

小提琴在哪裏？ – Sam1604

不要忘記在文本框中添加默認文本 – davidb

嘗試這樣的事情，FIDDLE

CSS

.formish { 
     width: 202px; 
     background: red; 
     background-repeat: none; 
     padding:5px; 
    } 

    .formish .btn { 
     color: white; 
     background: transparent; 
     border:1px solid white; 
    } 
    .formish .btn { 
     color: white; 
     background: transparent; 
     border:1px solid white; 
    } 
    .formish .input { 
     border:none; 
    }

HTML

<form class="formish"> 
    <input type="email" value="" class="input"> 
    <input type="submit" class="btn" value="Send"> 
</form>

來源

2014-02-20 12:06:53

設計元素，以輸入和發送鍵結合

回答

相關問題