CSS 29
Contact Form By jon on 26th October 2023 08:20:16 AM
  1.  
  2. .wpcf7 {
  3.   //================== Registration Contact Form //==================
  4.   position: relative;
  5.   display: block;
  6.   margin: 3rem 0;
  7.  
  8.   form {
  9.     p {
  10.       margin: 0 0 20px 0;
  11.     }
  12.  
  13.     .kontakt, .tasting-anmeldung {
  14.       display: flex;
  15.       justify-content: center;
  16.       align-items: center;
  17.       flex-direction: column;
  18.       width: 100%;
  19.       margin: 2rem 0 4rem 0;
  20.       div{
  21.         width: 100%;
  22.       }
  23.     }
  24.  
  25.     .tasting_drop_down {
  26.       span {
  27.         position: relative;
  28.         display: inline-block;
  29.         width: 100%;
  30.       }
  31.  
  32.       span select {
  33.         appearance: none;
  34.         -webkit-appearance: none;
  35.         -moz-appearance: none;
  36.         width: 100%;
  37.         padding: 10px 30px 10px 10px;
  38.         background: white no-repeat right center;
  39.         border: 1px solid @rustic_clay;
  40.       }
  41.  
  42.       span::after {
  43.         content: '▼';
  44.         position: absolute;
  45.         right: 10px;
  46.         top: 50%;
  47.         transform: translateY(-50%);
  48.         pointer-events: none;
  49.         color: @rustic_clay;
  50.       }
  51.  
  52.       select {
  53.         option {
  54.           border: none;
  55.         }
  56.       }
  57.     }
  58.  
  59.  
  60.     p {
  61.       display: flex;
  62.       flex-direction: column;
  63.       align-items: center;
  64.       width: 100%;
  65.  
  66.       label {
  67.         text-align: left;
  68.         width: 100%;
  69.         margin: 1rem 0;
  70.         .f1();
  71.       }
  72.  
  73.       span {
  74.         position: relative;
  75.         width: 100%;
  76.  
  77.         input {
  78.           width: 100%;
  79.           border: 1px solid @rustic_clay;
  80.           padding: 10px;
  81.           .f2();
  82.           .box-sizing;
  83.         }
  84.  
  85.         input[readonly] {
  86.           .readonly-bg();
  87.         }
  88.  
  89.         #message {
  90.           border: 1px solid @rustic_clay;
  91.           .f2();
  92.           background: @w;
  93.         }
  94.       }
  95.  
  96.       span input:focus,
  97.       span textarea:focus {
  98.         outline: none; /* Removes the default focus outline */
  99.         border-color: @b; /* Replace 'desiredColor' with the color you want or 'transparent' */
  100.       }
  101.  
  102.  
  103.     }
  104.  
  105.     .wpcf7-response-output {
  106.       border-color: unset !important;
  107.       margin: 2rem auto;
  108.       text-align: center;
  109.     }
  110.  
  111.     .wpcf7-checkbox, .wpcf7-acceptance {
  112.       //================== Registration Contact Form //==================
  113.       .wpcf7-list-item {
  114.         label {
  115.           .wpcf7-list-item-label {
  116.             position: relative;
  117.             display: block;
  118.             padding: 8px 5px 5px 30px;
  119.             cursor: pointer;
  120.             .transition;
  121.  
  122.             &:hover {
  123.               //color: @c1;
  124.             }
  125.  
  126.             &:before {
  127.               position: absolute;
  128.               top: 50%;
  129.               left: 1px;
  130.               .translate(0, -50%);
  131.               display: block;
  132.               .far(20px, inherit, '\f111');
  133.             }
  134.           }
  135.         }
  136.  
  137.         input {
  138.           &[type=checkbox] {
  139.             display: none;
  140.           }
  141.  
  142.           &[type=checkbox]:checked + span:before {
  143.             display: block;
  144.             .far(20px, inherit, '\f058');
  145.           }
  146.         }
  147.       }
  148.     }
  149.  
  150.     textarea.wpcf7-textarea {
  151.       width: 100%;
  152.       padding: 6px 12px;
  153.       background: @g0;
  154.       border: none;
  155.       .box-sizing;
  156.     }
  157.  
  158.     input[type="submit"] {
  159.       border: none;
  160.       padding: 10px 40px;
  161.       color: @w;
  162.       text-transform: uppercase;
  163.       .f1;
  164.       cursor: pointer;
  165.       background: @espresso_brown;
  166.       .transition;
  167.  
  168.       &:disabled {
  169.         cursor: not-allowed;
  170.         color: @g4;
  171.         background: @g2;
  172.       }
  173.  
  174.       &:not(:disabled):hover {
  175.         color: @w;
  176.         background: @rustic_clay;
  177.       }
  178.     }
  179.   }
  180. }

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Recent Pastes

Elementor Sticky[...]

JS baseURL

ASCI Banner

Jump to anchor / go[...]

Phpstorm[...]

Wp user[...]

WP CPT Custom Icon[...]

WP get assigned[...]

Linux / Ubuntu[...]

SQL replace[...]

Raw Paste

Login or Register to edit or fork this paste. It's free.

Copyright © 2025 Paste. All rights reserved.
Powered by Paste