Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 16, 2021 at 4:48 pm #1333154
    tinohannes

    Hey there,

    Is there any chance to change the color of the checkbox from the contact form?

    Example

    Thank you.

    All the best,
    Tino

    December 17, 2021 at 7:27 am #1333198
    Guenni007

    if it is a standard checkbox it is not a simple solution on that – because it is depending on browser settings.
    ( Maybe if you use a plugin on the form – there might be settings on that)
    if you realy like to style a checkbox – i guess there will be no otherway to set the genuine checkbox to opacity zero and place f.e. a substitute on the pseudocontainers before or after.
    see here an example ( privacy checkboxes ) : https://consulting.webers-testseite.de/kontakt/
    see here a codepen: https://codepen.io/jinukurian7/pen/NWPrZqr on how the principal works.

    December 17, 2021 at 7:28 am #1333199
    Rikard

    Hi Tino,

    Could you post a link to where we can see the actual element please?

    Best regards,
    Rikard

    December 17, 2021 at 9:30 am #1333233
    tinohannes

    Hey Rikard,

    of course, there you go: https://www.stadtkyll-ferienwohnung.de/zimmeranfrage/

    All the best,
    Tino

    December 17, 2021 at 9:32 am #1333234
    tinohannes

    Thank you @Guenni007, I’ll give this a try!

    All the best,
    Tino

    December 18, 2021 at 4:40 am #1333318
    Rikard

    Hi,

    Thanks for the update. Did you try out the suggestion shared by @guenni007, and did you have any luck with it?

    Best regards,
    Rikard

    December 18, 2021 at 10:14 am #1333349
    Guenni007

    try this in your quick css:
    ( it is always better to see the page to create a precise code ) ;)

    #top .avia_ajax_form .input_checkbox {
  width: 100%;
  margin: 15px auto;
  position: relative;
  display: block;
}
#top .avia_ajax_form .input_checkbox_label {
  position: relative;
  min-height: 34px;
  display: block;
  padding-left: 40px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
  line-height: 30px;
  text-align: left;
}
#top .avia_ajax_form .input_checkbox_label span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#top .avia_ajax_form .input_checkbox_label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  margin: 4px;
  width: 15px;
  height: 15px;
  transition: transform 0.28s ease;
  border-radius: 3px;
  border: 2px solid #007400;
}
#top .avia_ajax_form .input_checkbox_label:after {
  content: "";
  display: block;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid #FFF;
  border-left: 2px solid #FFF;
  transform: rotate(-45deg) scale(0);
  transition: transform ease 0.25s;
  position: absolute;
  top: 8px;
  left: 8px;
}
#top .avia_ajax_form .input_checkbox {
  display: none;
}
#top .avia_ajax_form .input_checkbox:checked ~ .input_checkbox_label:before {
  border: 2px solid #007400;
  background-color: #007400;
}
#top .avia_ajax_form .input_checkbox:checked ~ .input_checkbox_label:after {
  transform: rotate(-45deg) scale(1);
}
#top .avia_ajax_form .input_checkbox:focus + .input_checkbox_label::before {
  outline: 0;
}
    December 18, 2021 at 10:34 am #1333351
    Guenni007

    by the way – if you like to have round checkboxes – just change the value of border-radius to 50% on:
    #top .avia_ajax_form .input_checkbox_label:before
    but I think it’s better to stay square – because round boxes are commonly used for radio buttons.

    December 19, 2021 at 4:56 am #1333404
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.