css - 如何更改 :focus? 上输入/文本区域的边框颜色

Question

我使用 React，我的附加 CSS 定义作为常量位于 js 文件中，如下所示(希望这不是一个坏习惯):

const STYLE = {
    logo: {
        width: '206px',
        height: '73px',
        margin: '120px auto 0',
        display: 'block'
    },
    label: {
        fontSize: 'x-small'
    },
    control: {
        border: 'solid',
        borderWidth: '0 0 1px',
        borderColor: '#E0E0E0',
        width: '200px'
    }
};

export default class Home extends React.Component {
    render() {
        return (
            <div>
                <img src='.../logo.gif' style={STYLE.logo}/>
                <FormGroup>
                    <Col smOffset=...>
                        <Form horizontal>
                            <FormGroup>
                                <Col sm=... style={STYLE.label}>
                                    Label: 
                                    <input style={STYLE.control} type="text"/>
                                </Col>
                            </FormGroup>
                        </Form>
                    </Col>
                </FormGroup>
            </div>
        )
    }
}

我想用 CSS 移除输入组件周围的边框。我需要将以下 css 添加到我的 STYLE.control 中:

input:focus {
    outline:none;
}

但我不知道该怎么做，因为(当然)这是行不通的:

const STYLE = {
    noBorder: {
        input:focus: 'outline:none'
    }
};

Answer 1

render() {
        return (
            <div>
              <style>
               input:focus {
                 outline: none;
               }
              </style>