Commencer un nouveau sujet

CSS | New look&feel for the custom forms

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


 

Connexion ou Inscription pour poster un commentaire