CSS Forms | form css
ThelookofanHTMLformcanbegreatlyimprovedwithCSS:StylingInputFieldsUsethewidthpropertytodeterminethewidthoftheinputfield:FirstNameTheexampleaboveappliestoallelements.Ifyouonlywanttostyleaspecificinputtype,youcanuseattributeselectors:input[type=text]-willonlyselecttextfieldsinput[type=password]-willonlyselectpasswordfieldsinput[type=number]-willonlyselectnumberfieldsetc..PaddedInputsUsethepaddingpropertytoaddspaceinsidethetextfield.Tip:Whenyouhavemanyinputsaftereachother,youmightal...
The look of an HTML form can be greatly improved with CSS:
Styling Input FieldsUse the width property to determine the width of the input field:
First NameThe example above applies to all <input> elements. If you only want to style a specific input type, you can use attribute selectors:
input[type=text] - will only select text fields input[type=password] - will only select password fields input[type=number] - will only select number fields etc.. Padded InputsUse the padding property to add space inside the text field.
Tip: When you have many inputs after each other, you might also want to add some margin, to add more space outside of them:
First Name Last Name Exampleinput[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box;}
Try it Yourself »[1]Note that we have set the box-sizing property to border-box. This makes sure that the padding and eventually...