How to convert HTML button to HTML input, while keeping all CSS? - css

Question

I have a form with a textbox for email input and a button. The button is technically a HTML button here. The Form's HTML is like this:
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit">
Submit
</button>
</form>
JSFiddle Code: http://jsfiddle.net/ahmadka/aDhUL/
I'd like to convert the button type="submit" control to an input type="submit", while also keeping all the current CSS, so that visually there's no change. CSS would need to be updated I guess. I tried to do this myself, but I couldn't update the CSS correctly.
Can someone help me with this please ?

Answer 1

The basic solution requires changing the following everywhere in your CSS
button -> input[type=button]
input -> input[type=text]
I'd prefer to add a CSS class, instead of referencing the tag names, you could just use
<input type="text" class="text" />
<input type="submit" class="btn" />
That would require changing the following everywhere in your CSS
button -> input.btn
input -> input.text
This is not fully finished but almost works http://jsfiddle.net/aDhUL/7/
The problem is that the input:before directive inserts an element inside of the input. That is allowed for button, but not allowed for input , since input can't have child elements. http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
So (if you want to use :before) you have to go back to a button, inserting a span element between the text field and the button won't allow you to have a hover effect on both the arrow and the button.
Why do you want to use input type="submit" in the first place?

Answer 2

You just need to change button to input[type=submit] in your stylesheets. If that doesn't work, then you'll need to be more specific about what problems you're having.

Answer 3

You will have to edit CSS, don't be lazy mate :)
<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;
}
Now you can also use after adding the class in 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

All of the style sheets have to be updated to do so:
What is now this:
/* Form submit button */
.form-wrapper button {
Needs to become this:
/* Form submit button */
.form-wrapper input[type=submit] {
there are a bunch more classes to be updated below that one..
EDIT: changed it from a class to the style as joe points out.