Question

I have a form which has some styling applied, including a border.

The problem I have is that as the button is considered an input as well it also has a border, but it’s an image and thus I’d like it to have NO border.

<form action="" method="get"><p><label for="name">Name: </label><input name="name" type="text" size="22" maxlength="100" /></p><p><label for="name">Email: </label><input name="email" type="text" size="22" maxlength="100" /></p><p><label for="name">Tel: </label><input name="tel" type="text" size="22" maxlength="100" /></p><p><label for="name">Message: </label><br /><textarea name="message" cols="33" rows="4"></textarea></p><input type="image" value="submit" src="assets/images/submit_btn.png" width="85" height="26" border="0" alt="submit" name="submit"></form>

And the css

input, textarea{border: 1px solid #D8CAB8;}.submit input, .submit textarea{color: #000;background: #ffa20f;border: 2px outset #d7b9c9;}

How can I make the button still within the form but not have the border?

Thanks 🙂

Answer 1

Give the button the CSS-class no-border. Then extend your CSSS with the code

input.no-border {
    border-width:0;  }

That’s it, I hope