[4.0] Border-width input and select fields

[angieradtke]

I have spent the last few days building a really really big site with Joomla 4. In the process, I've noticed that I'm having trouble figuring things out. I noticed particularly negatively that the border around the input fields is too thin and the text in them is barely distinguishable from the label. The contents of the fields are more difficult to grasp. Especially when you skim the page. Maybe I'm getting old and my eyes are not well enough anymore : -)

By adjusting the border-width it will be better, I think.

.custom-select, .form-select {
   .......
    border: 3px solid var(--atum-bg-dark-20);
}

.form-control {
 ....
    border: 3px solid var(--atum-bg-dark-20);
...
}

[chmst]

I have the same problem with checkboxes. They are very visible when checked but hard to find if unchecked.

[brianteeman]

personally speaking 3px is too much.

However if its going to be changed then it needs to be changed in a lot more places than suggested in the initial post so that all inputs have the same border. eg choices lists, checkboxes etc

Also combination fields like image preview need to be looked at as just changing the input border looks odd with the button and preview not having the same border

For the checkboxes alone they actually have a different border to the inputs so you might want to try it with the same border values

[drmenzelit]

@ciar4n can you please have a look at this?

[Krshivam25]

I tried border : 2px

[brianteeman]

I have the same problem with checkboxes. They are very visible when checked but hard to find if unchecked.

@chmst instead of changing the border thickness we can change its colour. Can you see if this change is better for you?

.form-check-input {
  border: 1px solid rgba(0, 0, 0, 0.55);
}