InputStyle red border combines with the black?

JavaScript
1

Tell us what’s happening:
Instead of overwriting the 1px solid black border, the code below puts the red border INSIDE the existing black border. This still passes the automated test, but it doesn’t seem like an ideal response.

Of note, I had the same issue when I tried plugging in the actual solution answer as well.

I’m using Microsoft Edge Version 100.0.1185.29 (Official build) (64-bit) as my browser.

  **Your code so far**


class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // Change code below this line
    if (this.state.input.length > 15) {
      inputStyle = {
        border: '3px solid red'
      }
    }
    // Change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36 Edg/100.0.1185.29

Challenge: Change Inline CSS Conditionally Based on Component State

Link to the challenge:

2

EDIT: Further info–actually, it appears to work correctly. Just has a black border around it when the input box has focus. That might just be a setting on my browser?

3

Actually, that’s accurate. If you wanted to disable that black, it isn’t a border but an outline. In the input:focus pseudo selector, try changing the outline property to something else.

2 Likes
4

Thats the annoying part in styling some elements, browser has some default styling, some appearing on events, like hover, click etc. and different browsers have different default styles, so very often, when you want to have full control over the styling, you need to get rid of some base styles. In the current case, like you were already told, its the outline attribute which causes that behavior, you can use outline: none; to get rid of it. There is also the box-shadow attribute, which you may find with similar effect, here and there.

1 Like
5

Reset styles can help with a lot of this, depending on how drastic you choose to make them

6

Thank you all! I appreciate the help.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.