CSS form submit styling

Question

Я работаю над формой отправки CSS/HTML, которую я собираюсь сделать, как показано ниже.

Я не уверен, как сделать кнопку отправки, как будто она находится внутри ввода текста?

Answer 1

Поместите контейнер DIV, который имеет точный цвет фона, как ваше текстовое поле. Поступая таким образом, вы можете получить эффект нажатия кнопки внутри текстового поля.

Answer 2

Легко, положите его в div и создайте div, чтобы он выглядел как входной текст. Затем вы просто делаете поле ввода одинаковым фоном, чем div.

Answer 3

Я сделал что-то подобное с моим 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. 
}