I need to change the border color of an input on focus. Im using styled-ponents and React:

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-ponents";

const StringInput = styled.input `
  border: 1px solid black;
  border-radius: 4px;
  padding: 6px 6px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  &:focus {
    border-color: red;
    transition: border-color 0.3s ease-in-out;
  }
`;

class Tst extends React.Component {
  render = () => {

    return ( <
      StringInput / >

    );
  };
}

export default Tst;

I need to change the border color of an input on focus. Im using styled-ponents and React:

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-ponents";

const StringInput = styled.input `
  border: 1px solid black;
  border-radius: 4px;
  padding: 6px 6px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  &:focus {
    border-color: red;
    transition: border-color 0.3s ease-in-out;
  }
`;

class Tst extends React.Component {
  render = () => {

    return ( <
      StringInput / >

    );
  };
}

export default Tst;

The border doesn´t change color when I click/focus on it. Help appreciated!

• javascript
• css
• reactjs
• styled-ponents

2 Answers 2

You need to disable outline for that:

const StringInput = styled.input`
  border: 1px solid black;
  &:focus {
    outline: none;
    border-color: red;
  }
`;

const App = () => {
  return <StringInput />;
};

The problem is with outline property.

import React from "react";
import styled from "styled-ponents";

const StringInput = styled.input`
  border: 1px solid black;
  border-radius: 4px;
  padding: 6px 6px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  &:focus {
    border-color: red;
    transition: border-color 0.3s ease-in-out;
    outline: 0;
  }
`;

class Tst extends React.Component {
  render = () => {
    return <StringInput />;
  };
}

export default Tst;

The link to sadbox is https://codesandbox.io/s/loving-booth-icboz?file=/src/App.js:0-479