Here is an example of CSS for forms, introducing a new look&feel:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); :root{ /********** COLOR **********/ --background:#5451C8; --button:#5451C8; --button-hover:#352886; } body {font-family:Roboto; font-size:14px; background-color:var(--background); padding:8px;} h1 {font-size:32px; margin:0px; padding:0px;} /* ---------------------------- CANVAS ---------------------------- */ body > div{max-width:600px; margin:auto; color:white!important; text-align:center;} p {margin:0px; padding:0px;} a, a:hover, a:visited{color:white!important;} body #form, .btn-center {background-color:white; padding:24px 24px 16px 24px; color:#333333!important; box-sizing: border-box; text-align:left;} #form #azform dl, #form #azform dt, #form #azform dd {margin-block-start: 0px; margin-block-end: 0px; margin-inline-start: 0px; margin-inline-end: 0px; margin:0px; padding:0px;} #form #azform dl > div {padding:8px 0px;} #form #azform dd > p {padding:4px 0px;} /* ---------------------------- DESCRIPTION ---------------------------- */ body #form > p {padding:16px 0px!important;} /* ---------------------------- FIELD ---------------------------- */ /* Common */ #form #azform label, #form #azform input, #form #azform textarea, #form #azform select {display:block; width:100%; font-size:14px;} #form #azform input[type=text],#form #azform input[type=tel],#form #azform input[type=email],#form #azform input[type=number],#form #azform input[type=url], #form #azform textarea, #form #azform select {padding:8px; border:1px solid #E7E7E7; border-radius:4px; box-sizing: border-box;} /* Label */ #form #azform label {padding-bottom:4px;} /* TextArea */ #form #azform textarea {height:100px;} /* Radio & Checkbox */ #form #azform input[type=radio], #form #azform input[type=checkbox] {height:14px; width:14px; display:inline;} #form #azform .radio label, #form #azform .checkbox label{width:auto; display:inline;} /* Phone */ #form #azform .intl-tel-input {display:inline-block; position:relative;} #form #azform input[type=tel] {padding-left:48px;} #form #azform .intl-tel-input .flag-dropdown {position:absolute; top:15px; bottom:auto;} /* List */ #form #azform .az_list {padding:0px; margin:0px;} #form #azform .az_list li {list-style:none;} /* ---------------------------- BUTTON ---------------------------- */ .btn-center {text-align:right; padding:0px 24px 24px 24px;} .btn-center > div{height:16px!important;} .btn-center .az-btn, #form #azform input[type=button] {padding: 0px 16px; border: 1px solid var(--button); background-color: white; color:var(--button); height: 38px; border-radius: 4px; cursor:pointer;} .btn-center .az-btn-pos {padding: 0px 16px; border: 1px solid var(--button); background-color: var(--button); color:white; height: 38px; border-radius: 4px; cursor:pointer;} .btn-center .az-btn:hover {border: 1px solid var(--button-hover); color:var(--button-hover);} .btn-center .az-btn-pos:hover {border: 1px solid var(--button-hover); background-color: var(--button-hover);} /* ---------------------------- ERROR ---------------------------- */ .error {color:#DC3545;} /* ---------------------------- SPECIFIC ---------------------------- */ #form #azform .az_list li.scale-rating {display:inline-block; padding:0px 8px;} #form #azform .price-symbol {font-size:12px; color:#5A5A5A;} #form #azform .title {font-size:16px; padding:16px 0px; font-weight:bold;} #az_tool_bottom {width:auto!important; display:flex; flex-direction:row; padding:16px 0px; font-size:10px;} #az_tool_bottom > div {flex:1; text-align:center!important; width:auto!important;} #az_tool_bottom .az_clearbox {display:none;}
Clément Lejeune
Here is an example of CSS for forms, introducing a new look&feel: