Remember me

Color Frames at mandatory fields

6 months 2 weeks ago #1

  • Sebastian's Avatar
  • Sebastian
  • Posts: 221
Hey guys,

normally I use a css code to edit the color of the frames at mandatory fields (when they are not filled):

In my example, I would like to have it blue like the background of the textboxes.





But it seems not to work any more.

Can you please send me a css code which is working?

Greets,
Sebastian

6 months 2 weeks ago #2

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hi Sebastian,

try this one :)
.body .ba-alert.ba-forms-authorize-field-wrapper input[type="text"], 
.body .ba-alert.calendar-field-wrapper input[type="text"], 
.body .ba-alert .upload-file-input, 
.body .ba-alert .ba-field-container select, 
.body .ba-alert .ba-field-container textarea, 
.body .ba-form-calendar-field:not(.ba-form-calendar-field) .ba-alert .ba-field-container input[type="text"], 
.body .ba-alert .ba-field-container input[type="text"], .body .ba-alert .ba-field-container input[type="number"], .body .ba-alert .ba-field-container input[type="password"], 
.body .ba-alert .ba-field-container input[type="email"] {
    box-shadow: inset 0 0 0 2px #8e98ae !important;
}

Regards,
Artem, Balbooa.com

6 months 2 weeks ago #3

  • Sebastian's Avatar
  • Sebastian
  • Posts: 221
Hi Artem

thanks. Now the frames look blue, but also red/orange. :lol:





Here's the css I have in this form:

.ba-forms-authorize-field-wrapper .ba-alert-tooltip,
.ba-form-field-item .ba-alert-tooltip {
background: #8c98b0 !important;
}
.ba-forms-authorize-field-wrapper .ba-alert-tooltip:before,
.ba-form-field-item .ba-alert-tooltip:before {
border-bottom: 5px solid #8c98b0!important;
}

.body .ba-alert.ba-forms-authorize-field-wrapper input[type="text"],
.body .ba-alert.calendar-field-wrapper input[type="text"],
.body .ba-alert .upload-file-input,
.body .ba-alert .ba-field-container select,
.body .ba-alert .ba-field-container textarea,
.body .ba-form-calendar-field:not(.ba-form-calendar-field) .ba-alert .ba-field-container input[type="text"],
.body .ba-alert .ba-field-container input[type="text"], .body .ba-alert .ba-field-container input[type="number"], .body .ba-alert .ba-field-container input[type="password"],
.body .ba-alert .ba-field-container input[type="email"] {
box-shadow: inset 0 0 0 2px #8c98b0 !important;
}


Greets,
Sebastian

6 months 2 weeks ago #4

  • Artem's Avatar
  • Artem
  • Posts: 11342
Sebastian,

Send us a link, it's gonna be much easier

Regards,
Artem, Balbooa.com

6 months 2 weeks ago #5

  • Sebastian's Avatar
  • Sebastian
  • Posts: 221
HI Artem,

of course.
Here you find the form:

wolke7-hochzeitswebseiten.de/kontakt

Greets,
Sebastian

6 months 2 weeks ago #6

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hey Sebastian,

Delete all custom code related to the question and replace my previous custom CSS with this one
body .ba-alert.ba-forms-authorize-field-wrapper input[type="text"], 
.body .ba-alert.calendar-field-wrapper input[type="text"], 
.body .ba-alert .upload-file-input, 
.body .ba-alert .ba-field-container select, 
.body .ba-alert .ba-field-container textarea, 
.body .ba-form-calendar-field:not(.ba-form-calendar-field) .ba-alert .ba-field-container input[type="text"], 
.body .ba-alert .ba-field-container input[type="text"], .body .ba-alert .ba-field-container input[type="number"], .body .ba-alert .ba-field-container input[type="password"], 
.body .ba-alert .ba-field-container input[type="email"] {
    box-shadow: inset 0 0 0 2px #8e98ae !important;
    border-color: #8c98b0 !important;
}

Results :)



Regards,
Artem, Balbooa.com

6 months 2 weeks ago #7

  • Sebastian's Avatar
  • Sebastian
  • Posts: 221
Works! Thank you!! :)
Designing all these "mandatory field things" would be also a good feature for future Forms updates.
Last update was also really great! B)
Have a good weekend!
Greets,
Sebastian

6 months 2 weeks ago #8

  • Artem's Avatar
  • Artem
  • Posts: 11342
Sebastian,

Thank you, have a great weekend too :)

Many thanks,
Artem, Balbooa.com

6 months 2 days ago #9

  • Sebastian's Avatar
  • Sebastian
  • Posts: 221
Hey Artem

what line of code do I need to add to your code posted above to also change the borders of checkboxes?

Do you even have a code that includes all fields of the form?

Thank you and greets,
Sebastian
Attachments:

6 months 20 hours ago #10

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hi :)

Here is
.body .ba-alert .ba-checkbox-wrapper .ba-form-radio span:before, 
.body .ba-alert .ba-checkbox-wrapper .ba-form-checkbox > span, 
.body .ba-alert .ba-checkbox-wrapper .ba-form-radio span:before, 
.body .ba-alert .ba-checkbox-wrapper .ba-form-checkbox > span, 
.body .ba-form-acceptance-field .ba-alert label.ba-form-checkbox > span, 
.body .ba-form-radio-field.ba-alert .ba-form-checkbox-wrapper .ba-form-radio span:before, 
.body .ba-form-field-item.ba-alert .ba-form-checkbox-wrapper label.ba-form-checkbox > span {
    border: 2px solid #8c98b0 !important;
}

Regards,
Artem, Balbooa.com

6 months 7 hours ago #11

  • Sebastian's Avatar
  • Sebastian
  • Posts: 221
Thank you!! :)
Powered by Kunena Forum