Including text with padding in the selection block

Librain 0
Viewed 55

I have text with padding and opacity, but when the user selects it, it appears with spaces and a different selection color. .main and .start are necessary for my code. How do I fix this?

  .main {
    padding: 0px 5px;
  }
  .start {
    opacity: 0.5;
  }
    <span class="main">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    </span>
    <span class="start">13941</span>
    <span class="main">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </span>

enter image description here

opacity selection javascript css html
2 Answers

You still need to remove the padding from the .main class. Rather than make the text opaque, I took the color of the text created by the opacity and made the text color that color. That allows the selection color to remain consistent.

I've also changed the selection color back to the browser's standard blue color. If you do that, then everything works as expected.

.main {
  padding: 0px 5px;
}


.main span {
  color: #C1C1C1;
  
  &::selection {
    background-color: #3291FF;
  }
}
<span class="main">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</span>
<span class="start">13941</span>
<span class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>

Millhorn0

I added a blank space in each .paragraph using JS, and set the opacity to color #C1C1C1.

Librain0
Related