Как конвертировать HTML-кнопку в HTML-ввод, сохраняя все CSS?

Question

У меня есть форма с текстовым полем для ввода электронной почты и кнопкой. Кнопка технически представляет собой HTML button. HTML форме является, как это:

<form class="form-wrapper cf"> 
    <input type="text" placeholder="Enter your email here..." required> 
    <button type="submit"> 
    Submit 
    </button> 
</form> 

JSFiddle Код:http://jsfiddle.net/ahmadka/aDhUL/

Я хотел бы, чтобы преобразовать управление button type="submit" к input type="submit", в то же время сохраняя все текущие CSS, так что визуально там нет изменение. Думаю, CSS нужно обновить. Я попытался сделать это сам, но я не смог правильно обновить CSS.

Может кто-нибудь помочь мне с этим, пожалуйста?

Answer 1

Базовое решение требует изменения следующих везде в вашем CSS

button -> input[type=button] 
input -> input[type=text] 

Я бы предпочел, чтобы добавить класс CSS, а не ссылки на имена тегов, вы могли бы просто использовать

<input type="text" class="text" /> 
<input type="submit" class="btn" /> 

Это потребует изменения следующего в вашем CSS

button -> input.btn 
input -> input.text 

Это не t полностью закончен, но почти работает http://jsfiddle.net/aDhUL/7/

Проблема в том, что директива input:before вставляет элемент внутри входа. Это разрешено для button, но не разрешено для input, так как input не может иметь дочерние элементы.http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

Итак (если вы хотите использовать: до), вам нужно вернуться к кнопке, вставив элемент span между текстовым полем и кнопкой, вы не сможете навешивать эффект наведения на стрелку и кнопка.

Почему вы хотите использовать input type="submit"?

Answer 2

Вам просто нужно изменить button на input[type=submit] в ваших таблицах стилей. Если это не сработает, тогда вам нужно быть более конкретным, какие у вас проблемы.

Answer 3

Вам придется редактировать CSS, не поленитесь мат :)

<form class="form-wrapper cf"> 
    <input type="text" placeholder="Enter your email here..." required> 
    <input type="submit" class="btn" value="submit"> 
</form> 

CSS

.btn{ 
color:green; 
} 

Теперь вы можете также использовать после добавления класса в CSS

<form class="form-wrapper cf"> 
    <input type="text" placeholder="Enter your email here..." required> 
    <button type="submit" class="btn">Button</button> 
</form> 

Answer 4

Все таблицы стилей необходимо обновить, чтобы сделать это:

Что сейчас это:

/* Form submit button */ 
.form-wrapper button { 

должен стать следующим:

/* Form submit button */ 
.form-wrapper input[type=submit] { 

Есть куча больше классов будут обновленной ниже, что один ..

EDIT: изменил его из класс в стиле, как отмечает Джо.