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   lt form action     method  post  gt      Name  lt input type  text  placeholder  First name   gt       lt input type  text  placeholder  Last name   gt      Email  lt input type  text   gt      Message  lt input type  textarea   gt       lt input type  submit  value  Send   gt   lt  form gt

User · Answer

I would suggest instead of using      lt input type  submit  gt    use       lt button type  submit  gt    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

User · Answer

HTML   lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset  utf-8    gt   lt title gt CSS3 Button lt  title gt   lt link href  style css  rel  stylesheet  type  text css  media  screen    gt   lt  head gt   lt body gt   lt div id  container  gt   lt a href     class  btn  gt Push lt  a gt   lt  div gt   lt  body gt   lt  html gt    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

User · Answer

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

User · Answer

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

User · Answer

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   gt  p        your styles here                 Here is a working Example

User · Answer

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     lt form action     method  post  gt       lt label for  text1  gt Text 1 lt  label gt       lt input type  text  class  textInput  id  text1    gt       lt label for  text2  gt Text 2 lt  label gt       lt input type  text  class  textInput  id  text2    gt       lt input id  submitBtn  type  submit    gt   lt  form gt    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

User · Answer

HTML   lt input type  submit  name  submit  value  Send  id  submit    gt    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

User · Answer

Very simple     lt html gt   lt head gt   lt head gt   lt style type  text css  gt   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     lt  style gt   lt  head gt   lt body gt   lt form gt   lt input class  buttonstyle  type  submit  name  submit  Value  Add Items   gt   lt  form gt   lt  body gt   lt  html gt    This is working I have tested

User · Answer

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

User · Answer

When styling a input type submit use the following code      input type submit        background-color  pink    Example stlying

User · Answer

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

[html] How to style input and submit button with CSS?

Examples related to html

Examples related to css