Update the blue line to white

Question

Do I change the color of the blue line that is generated when I clicked?

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(
  <div>
    <p tabIndex={-1}
       style={{}}
       onKeyDown={event => alert(event.keyCode)}>
      Click to focus, then hit a key.
    </p>

  </div>,
  document.getElementById('container')
);

https://jsfiddle.net/s7bjk42m/

Possible duplicate of [How to remove focus border (outline) around text/input boxes? (Chrome)](https://stackoverflow.com/questions/3397113/how-to-remove-focus-border-outline-around-text-input-boxes-chrome) — Hamza El Aoutar, Oct 01 '19 at 12:58
@adabusra, if you found that the answer worked, please consider marking it as the solution. If not, please post your solution so that it could help someone else. — Winston Jude, Oct 03 '19 at 11:07

Winston Jude · Answer 1 · 2019-10-01T13:21:21.717

To remove the outline:

This is happening because the paragraph element takes the default browser outline on focus. You can change the code to this to fix this. I have removed the outline that's being added on focus to the paragraph element:

class Hello extends React.Component {
  render() {
    return <div > Hello {
      this.props.name
    } < /div>;
  }
}

ReactDOM.render( <
  div >
  <
  p tabIndex = {-1
  }
  style = {
    {
      outline: "none"
    }
  }
  onKeyDown = {
    event => alert(event.keyCode)
  } >
  Click to focus, then hit a key. <
  /p>

  <
  /div>,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Alternatively, you can add this in your css file:

p {
  outline: none;
}

To change the outline color:

As @Akiba suggested, in your css file you could add border instead. Borders are much more flexible than outline (Although it is possible to just style the outline, it would not be a recommended approach for many reasons).

p {
  outline: none; //Removes outline
  border: 1px solid red; //Sets 1px solid red border
  padding: 5px; //optionally add padding to space it out
}

@adabusra For some reason, I was not able to fix the formatting. The only lines that you need alter are the style={{outline:"none"}} — Winston Jude, Oct 01 '19 at 13:13

score 1 · Answer 2 · answered Oct 01 '19 at 13:05

1

You need to alter the :focus selector of the css. You can remove the outline by using the below and then replace it by adding a border when the :focus state is active.

#container p:focus{
    outline:none;
    border:1px solid #000;
}

answered Oct 01 '19 at 13:05

Akiba

47
1
11

Update the blue line to white

2 Answers2