Html Question posted in
Some basic documentation can be found here.

Html – Text in a paragraph gets darker when i focus input element

I have this simple code for replicate this weird behavior that i can’t understand how to solve, when i just click inside the input element the text in the paragraph becomes darker, it seems like it loses some opacity. Focus in and out from the input element by clicking it and you will see this, you can just copy the code and try it’s pretty easy to see.
I see that with other colors i don’t see this behavior but i wanna be free to choose any color i want for the paragraph.
Why this happens and how can i prevent any change of the paragraph text when i focus the input element?

body {
  background-color: rgb(57, 57, 57);
}

p {
  color: rgb(243, 0, 0);
}
<input>
<p>I'm just a text that get's weird when i focus the input tag</p>
Tags:

3

Answers


  1. 0

    You can prevent this by removing the outline when the input is focused, by adding: input:focus {outline: 0;}. to your styles.

    body {
  background-color: rgb(57, 57, 57);
}

p {
  color: rgb(243, 0, 0);
}

input:focus{
  outline: 0;
  box-shadow: 0 0 0 2px highlight;
}
    <input>
<p>I'm just a text that get's weird when i focus the input tag</p>

    This happens, because when you focus the <input> some browsers change how they render neighboring elements like your <p> text. I guess, that removing outline helps because it prevents the browser from recalculating the rendering context, which causes this strange behaviour.

    ***UPDATE:***

    Thanks, A. Haworth for reminding about accessibility issues that comes with removing the outline form input when it’s focused.

    To replicate the original browser outline, you can add a box-shadow that mimics the appearance of the default focus outline or do it any other way that creates a visible focus indicator.

    The reason, I picked box-shadow and not a border is because adding border on focused element causes little layout shift, which doesn’t happen with box-shadow.

    Login or Signup to reply.
  2. 0

    Nazar Hapak’s answer was confusing for me as well. However, I tried by adding outline: 0; to all the element and it works as expected.

    The reason could be to provide visual feedback to the user about where their focus is currently situated.

    * {
  outline: 0;
}

body {
  background-color: rgb(57, 57, 57);
}

p {
  color: rgb(243, 0, 0);
}
    <input>
<p>I'm just a text that get's weird when i focus the input tag</p>
    Login or Signup to reply.
  3. 0

    I’m not sure what is the root cause, but adding will-change:transform on the input can fix the problem. Many times when seeing this sort of problem especially in Chrome, forcing GPU rendering solves the problem.

    body {
  background-color: rgb(57, 57, 57);
}

input {
  will-change: transform;
}

p {
  color: rgb(243, 0, 0);
}
    <input>
<p>I'm just a text that get's weird when i focus the input tag</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search