piffy

form con stile (form.css)

Aug 5th, 2021
893
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. form {
  2.     border: 8px solid black;
  3.     font-family : handwriting,fantasy;
  4.     width:300px;
  5.     padding:20px;
  6. }
  7.  
  8. button, input, select, textarea {
  9.     font-family : inherit;
  10.     font-size   : 80%;
  11. }
  12.  
  13. .stiloso {
  14.     text-align: left;
  15.     float:right;
  16.     display: inline-block;
  17.     margin-top:auto;
  18.     border: 2px solid #ccc;
  19.     box-shadow:0 0 25px 6px rgba(0,0,0,0.06);
  20.     padding:5px;
  21.     border-radius:5px;
  22.     transition: .5s background-color;
  23.  
  24. }
  25.  
  26. .stiloso:hover {
  27.     border:3px solid #111;
  28. }
  29.  
  30. .bordorosso {
  31.     border: 2px solid #a00;
  32.     background-color: #ffd969;
  33.     transition: .5s border-color;
  34. }
  35.  
  36. .bordorosso:focus {
  37.     background-color: #ffd969;
  38.     border-color: #a00;
  39. }
  40.  
  41. textarea {
  42.     background-color: bisque;
  43. }
  44.  
  45. select {
  46.     margin-top:10px;
  47.     width: 100%;
  48.     padding:10px;
  49.     border-radius:10px;
  50. }
  51.  
  52. button {
  53.  
  54.     appearance:none;
  55.     -webkit-appearance:none;
  56.     padding:10px;
  57.     border:none;
  58.     background-color:#3F51B5;
  59.     color:#fff;
  60.     font-family : handwriting,fantasy;
  61.     font-weight:200;
  62.     border-radius:5px;
  63.  
  64. }
  65.  
  66. body {
  67.     margin:30px;
  68.     font-size:18px;
  69. }
  70.  
  71. /* contenitore */
  72. label {
  73.     position: relative; /* diventa un contenitore*/
  74.     padding-left:30px; /* fare spazio per la checkbox personalizzata */
  75.     cursor: pointer;
  76. }
  77. /* nasconde il checkbox di default  */
  78. label input[type=checkbox]  {
  79.     position: absolute;
  80.     opacity: 0;
  81.     width:0;
  82.     height:0;
  83. }
  84. label input[type=radio]  {
  85.     position: absolute;
  86.     opacity: 0;
  87.     width:0;
  88.     height:0;
  89. }
  90.  
  91. /* custom checkbox personalizzato */
  92. label span {
  93.     position: absolute;
  94.     /* posizionarsi nello spazio libero della label */
  95.     top:0;
  96.     left:0;
  97.     width:20px;
  98.     height:20px;
  99.     background-color: #ddd;
  100.     transition: .3s background-color; /* slight transition */
  101. }
  102. /* l'icona del check*/
  103. label span:after {
  104.     content: "";
  105.     position: absolute;
  106.     display: none;
  107.  
  108.     /* icona */
  109.     left: 6px;
  110.     top: 2px;
  111.     width: 4px;
  112.     height: 10px;
  113.     border: solid white;
  114.     border-width: 0 3px 3px 0;
  115.     transform: rotate(45deg);
  116. }
  117. label:hover span {
  118.     background-color: #ccc;
  119. }
  120.  
  121. /**** ecco il trucchetto ***/
  122. label input:checked ~ span {
  123.     background-color: #2eaadc;
  124. }
  125. label input:checked ~ span:after {
  126.     display:block;
  127. }
  128.  
  129.  
  130.  
RAW Paste Data