0

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 :)

3 Answers 3

3

Use selectors in your css :)

if you are using submit:

input[type="submit"] {
   border:0;
}

if you are using an image type try adding a class to it

.imageclass {
   border:0;
}
1
  • Love the selector idea. Works perfectly. Thank you! Sep 12, 2012 at 21:32
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

0

instead of writing CSS for whole textarea and input , write it in the form of classes , since you are providing css for input as common , you are unable to remove the border

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.