CODEWITHSUNDEEP
javascriptcssreactjs
yigido
yigido

Reputation: 5

Update the blue line to white

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/

Upvotes: 0

Views: 136

Answers (2)

Winston Jude
Winston Jude

Reputation: 599

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
}

Upvotes: 1

Akiba
Akiba

Reputation: 62

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;
}

Upvotes: 1

Related Questions