? No Code Attached Yet a11y
avatar angieradtke
angieradtke
14 Jul 2021

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 : -)
joomla-borders

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);
...
}
avatar angieradtke angieradtke - open - 14 Jul 2021
avatar joomla-cms-bot joomla-cms-bot - change - 14 Jul 2021
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 14 Jul 2021
avatar chmst
chmst - comment - 14 Jul 2021

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

grafik

avatar chmst chmst - change - 14 Jul 2021
Labels Added: ?
avatar chmst chmst - labeled - 14 Jul 2021
avatar brianteeman
brianteeman - comment - 18 Jul 2021

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

image

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

avatar drmenzelit
drmenzelit - comment - 29 Jul 2021

@ciar4n can you please have a look at this?

avatar Krshivam25
Krshivam25 - comment - 19 Aug 2021

I tried border : 2px
border

avatar brianteeman
brianteeman - comment - 15 Feb 2022

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);
}
avatar Hackwar Hackwar - change - 22 Feb 2023
Labels Added: ? No Code Attached Yet a11y
Removed: ? ?
avatar Hackwar Hackwar - labeled - 22 Feb 2023

Add a Comment

Login with GitHub to post a comment