CODEWITHSUNDEEP
htmlcssinputbootstrap-4frontend
Aurelon
Aurelon

Reputation: 101

CSS input:focus and border-color issues

The problem

I'm currently working on a project where I build a frontend using bootstrap4. To match the CI, I changed the highlighting colour of inputs to match the companies main colour scheme.

Basically I did the following:


:root{
    --custom-red: #871d33;
}

...

input:focus, textarea:focus, select:focus{
    border-color: var(--custom-red);
    box-shadow: 0 0 3px var(--custom-red);
    -moz-box-shadow: 0 0 3px var(--custom-red);
    -webkit-box-shadow: 0 0 3px var(--custom-red);
}

Which produces the following result in a form (Firefox), which is alright: Screenshot

But somehow date input fields are messed up in a strange way as soon as a value has been selected; take a look: Screenshot Interestingly, the cropping problem is reseted as soon as the viewport is resized, which means there is some kind of rendering issue.

Now I was looking around what was happening to my date fields and ended up detecting the source: border-color: var(--custom-red); As soon as I remove this line from my css and therefore stick with the default bootstrap-blue highlighting everything works as expected - no more cropping.

I found out, that somehow there is a 8px border-left and border-right setting, hidden somewhere, since this setting does not appear on the element inspector but the values can clearly be seen on the box values: Screenshot before Interestingly, these 8px settings change, when I re-add my css back again and :focus on my field: Screenshot after

Since I was not editing anything on the border-left or border-right parameter I could not get my head around what was going on. My suggestion now is, that border-color somehow 'resets' other border-xy settings silently in the background. That sounds completely crazy in my opinion but I even noticed, that border-radius is definitely overwritten, when :focus is triggered. Take a look on this (need to zoom in): border-radius unfocused, border-radius focused

Testing on other browsers

Update

I just discovered that outline: none; removes the default chrome based :focus behaviour and uses the desired css like a fallback. This way the behaviour on chrome based browsers is at least now similar to the one on Firefox but on Firefox the cropping issue still stays the same.

Original

Now I was not sure whether this is maybe a browser based issue, so I checked on chrome based browsers as well and ... well it looks like :focus is here something totally different, than clicking into the field! Triggering :focus using the element inspector gives the expected result: Screenshot inspector based triggering But simply clicking into the field only 'highlights' it darkish for some reason: Screenshot manually clicking Interestingly, one can see the overwritten border-radius on this example even more, than on Firefox!

Despite the fact I do not understand why there are obviously two different types of 'focusing' in chrome based browsers, the date field is working as expected and not cropping off content: Sorry, had to remove this screenshot for I have not enough points, yet

End

So now I'm completely confused:

  1. Why is border-color behaving as it behaves under Firefox? Did somebody ever encounter anything like that?
  2. Why are there different :focus triggers on chrome based browsers, despite the fact :focus is listed as supported by GoogleChrome and derivatives?

I need some fresh coffee now. Thanks for every reply!

Example code

As requested, here you go:

input:focus{
  outline: none;
  border-color: red;
  box-shadow: 0 0 3px red;
  -moz-box-shadow: 0 0 3px red;
  -webkit-box-shadow: 0 0 3px red;
}
<input type="date">

Upvotes: 3

Views: 13162

Answers (1)

Aurelon
Aurelon

Reputation: 101

Workaround

So I could not find any root for this problem but I found at least a workaround by adding custom default border settings as well:

input{
    width: 100%;
    border: 1px solid gray;
    border-radius: 0.2rem;
    padding: 0.3rem 0.5rem;
}

input:focus{
    outline: none;
    border-color: red;
}
<input type="date">

This way the default behaviour is overwritten and the date input finally working as expected.

But still - I would like to know what is happening in the default case?

Upvotes: 6

Related Questions