How can I use CSS to style an input field and a submit button?

Problem

CSS is something I’m learning. How can I use CSS to style an input field and a submit button?

I’m trying to do something similar, but I’m not sure how.

<form action="#" method="post">
    Name <input type="text" placeholder="First name"/>
    <input type="text" placeholder="Last name"/>
    Email <input type="text"/>
    Message <input type="textarea"/>
    <input type="submit" value="Send"/>
</form>

Asked by user2307683

Solution #1

http://jsfiddle.net/vfUvZ/

Here’s a place to start.

CSS:

input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    border-color:#333;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

Answered by Nick R

Solution #2

Style your Submit button the same way you would any other html element. CSS attribute selectors can be used to target different types of input components.

You could, for example, write

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

Combine with other selections to get the best results.

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

Here’s an example that works.

Answered by It worked yesterday.

Solution #3

HTML

<input type="submit" name="submit" value="Send" id="submit" />

CSS

#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}

Answered by Jayram

Solution #4

Instead than using, I would recommend

use

The CSS styling of Button was specifically considered when it was created. You may now design it with CSS3 gradients or add a gradient background image.

More information on HTML5 form structure may be found here.

Cheers! .Pav

Answered by Pav

Solution #5

I’d recommend assigning the components to style class names or ids (preferably a class for the text-inputs, because there will surely be multiple) and an id to the submit button (though a class would suffice):

<form action="#" method="post">
    <label for="text1">Text 1</label>
    <input type="text" class="textInput" id="text1" />
    <label for="text2">Text 2</label>
    <input type="text" class="textInput" id="text2" />
    <input id="submitBtn" type="submit" />
</form>

With the CSS:

.textInput {
    /* styles the text input elements with this class */
}

#submitBtn {
    /* styles the submit button */
}

You can pick by characteristics (using the same HTML) for more recent browsers:

.input {
    /* styles all input elements */
}

.input[type="text"] {
     /* styles all inputs with type 'text' */
}

.input[type="submit"] {
     /* styles all inputs with type 'submit' */
}

You could also just use sibling combinators (since the text-inputs to style seem to always follow a label element, and the submit follows a textarea (but this is rather fragile)):

label + input,
label + textarea {
    /* styles input, and textarea, elements that follow a label */
}

input + input,
textarea + input {
    /* would style the submit-button in the above HTML */
}

Answered by David Thomas

Post is based on https://stackoverflow.com/questions/17042201/how-to-style-input-and-submit-button-with-css