CSS表單提交樣式

我正在處理CSS/HTML提交表單，我將使其看起來像下面的圖像。CSS表單提交樣式

我不知道如何使提交按鈕出現像它在文本輸入內，但？

enter image description here

來源

2012-03-31 CodeDevelopr

兩個輸入字段都可能被一個div包圍，並且該文本框沒有任何邊框。 – ZippyV 2012-03-31 21:45:56

將有確切的背景顏色爲您的文本框中輸入一個div容器。通過這樣做，您可以獲得按鈕在文本框內的效果。

來源

2012-03-31 21:44:51

簡單的說，把它放在一個div裏面，並且把div看起來像一個輸入文本。然後，您只需使輸入字段具有與div相同的背景。

來源

2012-03-31 21:45:45

我做了一些類似於我的blog的提交使用相對定位的評論。此方法不需要任何額外的HTML標記。

首先將您的提交按鈕直接放置在文本輸入的下方和右側，然後將其向上移動，並將其以相對定位向上移動到文本輸入中。像這樣的東西應該工作。

input[type="text"] { <-- Your text input (height comes out to 35px with padding) 
    height: 25px; 
    padding: 5px; 
    margin-bottom: 0; 
} 

input[type="submit"] { <-- Your submit button (10px shorter for padding) 
    height: 25px; 
    position: relative; 
    bottom: 35px; 
    right: 5px; 
    margin-top: 0px; 
    margin-bottom: -30px; <-- To get rid of the empty leftover space. 
}

來源

2012-03-31 23:38:55 Palmer

CSS表單提交樣式

回答

相關問題