How to easy style the Form?

Yeah, if anyone know how to do this pretty simple, preferable without coding, to be able to make the form fit in the rest of the web design/styles/ I’m happy to hear it.

Hi Joakim,

You can add two classes to your Class Manager and edit them.

.form-control for fields.
.alert for alert messages.

Cheers,
Eldar

3 Likes

Hi Joakim,

here are the classes for the alerts

.alert
.alert-warning
.alert-success

1 Like

Thanks a lot guys, you’re great, I will try/test every of that!

Absolutely amazing how good your tips works – thanks again!.. well, I think I need to practice a lot to get this working, as so far the classes I tried to make is for sure a mess :slight_smile:

1 Like

If I am allowed to add two more questions…

Is there a way to remove the light blue border on the focused input field? And maybe even a way to change or remove the background of the select dropdown?

Bootstrap has some classes for styling form elements, I would use these when styling the form.

Eg.

.custom-control
.custom-select

1 Like

After a bit of reading… do I understand correctly that I’d need to set up a completely custom form field on my own… as … not using the form bric?

Just apply the class to the form field.

When you add .custom-select to the drop down box you will see it change straight away.

1 Like

Still don’t seem to be able to get rid of that darn blue … not really border, seems more like a box shadow… wait!

.
.
.

Awesome. Added a box shadow and set everything to 0 and transparent. Not it works. Thanks for pointing me in the correct direction Pete!

Now just tweak the styling of that class to suit you design.

Mission accomplished :grinning:

1 Like

We never like those blue lines, but they are part of accessibility.

The style is an outline on :focus.

I am guilty like many of removing it, but its bad practise really.

There are ways to disable it when the mouse is being used, and enable it when someone is navigating with the keyboard.

eg. https://raw.githubusercontent.com/nuclei/unfocus/master/dist/unfocus.js