CODEWITHSUNDEEP
cssformsborderstyling
Francesca
Francesca

Reputation: 28148

Styling forms - inputs and buttons, CSS

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

Upvotes: 0

Views: 1046

Answers (3)

lars k.
lars k.

Reputation: 592

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

Upvotes: 1

Esh
Esh

Reputation: 856

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

Upvotes: 0

Paradise
Paradise

Reputation: 470

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;
}

Upvotes: 3

Related Questions