How to style input and submit button with CSS?

Question

I'm learning CSS. How to style input and submit button with CSS?

I'm trying create something like this but I have no idea how to do

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

enter image description here

http://stackoverflow.com/questions/3540380/how-can-i-apply-css-on-all-buttons-which-are-present-in-that-page — gaynorvader, Jun 11 '13 at 10:46
Important thing to note, you **cannot** style it like you would any other element. `` tags don't support things like `::after`. — JamEngulfer, Dec 08 '17 at 02:29
Correct. That's why I think it's preferable to use ``. You can then use `::after` on the `span`-tag. — kunambi, Mar 01 '18 at 04:58

score 244 · Answer 1 · edited Nov 09 '15 at 13:21

http://jsfiddle.net/vfUvZ/

Here's a starting point

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

It worked yesterday. · Answer 2 · 2018-08-07T06:05:05.827

Simply style your Submit button like you would style any other html element. you can target different type of input elements using CSS attribute selector

As an example you could write

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

Combine with other selectors

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

Here is a working Example

score 27 · Answer 3 · answered Jun 11 '13 at 10:46

27

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 Jun 11 '13 at 10:46

Jayram

18,820
6
51
68

score 20 · Answer 4 · answered Jun 11 '13 at 12:45

20

I would suggest instead of using

<input type='submit'>

use

<button type='submit'>

Button was introduced specifically bearing CSS styling in mind. You can now add the gradient background image to it or style it using CSS3 gradients.

Read more on HTML5 forms structure here

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

Cheers! .Pav

answered Jun 11 '13 at 12:45

Pav

1,156
1
7
10

1

This was very helpful, as Safari for iOS correctly applies my style to buttons, but not to :) – CrushedPixel Oct 13 '15 at 09:35
But then you can't specify value as the text on the button, rather as the text between the button tags – GregarityNow Feb 20 '17 at 12:18

eis · Answer 5 · 2017-09-17T07:42:37.080

4

form element UI is somewhat controlled by browser and operating system, so it is not trivial to style them very reliably in a way that it would look the same in all common browser/OS combinations.

Instead, if you want something specific, I would recommend to use a library that provides you stylable form elements. uniform.js is one such library.

edited Sep 17 '17 at 07:42

answered Jun 11 '13 at 10:47

eis

51,991
13
150
199

@BalinKingOfMoria looks like that yes. I updated the link. – eis Sep 17 '17 at 07:42

score 4 · Answer 6 · answered Jun 11 '13 at 10:50

For reliability I'd suggest giving class-names, or ids to the elements to style (ideally a class for the text-inputs, since there will presumably be several) and an id to the submit button (though a class would work as well):

<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 */
}

For more up-to-date browsers, you can select by attributes (using the same HTML):

.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 */
}

score 2 · Answer 7 · answered Oct 17 '17 at 19:09

I did it this way based on the answers given here, I hope it helps

.likeLink {
    background: none !important;
    color: #3387c4;
    border: none;
    padding: 0 !important;
    font: inherit;
    cursor: pointer;
}
    .likeLink:hover {
        background: none !important;
        color: #25618c;
        border: none;
        padding: 0 !important;
        font: inherit;
        cursor: pointer;
        text-decoration: underline;
    }

idiot2.htm · Answer 8 · 2021-02-28T07:16:51.403

2

<input type="submit" style="background: red;" value="PRIVATE">

last place to be hit in a CSS hi-jack. Ugly but safe. Fastest and hard to change. yes.

edited Feb 28 '21 at 07:16

answered Feb 28 '21 at 07:09

idiot2.htm

21
2

But, doesn't work with restrictive [Content-Security-Policy directives](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src). – Syscall Feb 28 '21 at 11:58
ahh, thanks for the heads up. appreciate it :-) – idiot2.htm Mar 01 '21 at 02:21

score 1 · Answer 9 · answered Apr 24 '15 at 22:17

1

When styling a input type submit use the following code.

   input[type=submit] {
    background-color: pink; //Example stlying
    }

answered Apr 24 '15 at 22:17

JacobG182

329
1
6

score 1 · Answer 10 · edited Oct 20 '15 at 12:54

1

Actually, this too works great.

input[type=submit]{
                 width: 15px;
                 position: absolute;
                 right: 20px;
                 bottom: 20px;
                 background: #09c;
                 color: #fff;
                 font-family: tahoma,geneva,algerian;
                 height: 30px;
                 -webkit-border-radius: 15px;
                 -moz-border-radius: 15px;
                 border-radius: 15px;
                 border: 1px solid #999;
             }

edited Oct 20 '15 at 12:54

Sushil Sharma

2,321
3
29
49

answered Oct 20 '15 at 12:02

Mpairwe Humphrey

11
1

This is completely awful – Ratbert Oct 22 '15 at 20:51

score 0 · Answer 11 · answered Jun 11 '13 at 10:59

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<a href="#" class="btn">Push</a>
</div>
</body>
</html>

CSS styling

a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}

How to use this like a submit input? – user2307683 Jun 11 '13 at 11:09 — user2307683, Jun 11 '13 at 11:09

score 0 · Answer 12 · answered Sep 11 '15 at 09:44

Very simple:

<html>
<head>
<head>
<style type="text/css">
.buttonstyle 
{ 
background: black; 
background-position: 0px -401px; 
border: solid 1px #000000; 
color: #ffffff;
height: 21px;
margin-top: -1px;
padding-bottom: 2px;
}
.buttonstyle:hover {background: white;background-position: 0px -501px;color: #000000; }
</style>
</head>
<body>
<form>
<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>
</form>
</body>
</html>

This is working I have tested.

How to style input and submit button with CSS?

12 Answers12

Linked