How can I change the border color of an input on focus using styled-components and React? Here is the code snippet I am currently using:
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
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'm having trouble getting the border color to change when clicking or focusing on the input. Any help would be greatly appreciated!