如何在：focus 上更改输入/文本区域的边框颜色？答案

【问题标题】：How to change border color of input/textarea on :focus?如何在：focus 上更改输入/文本区域的边框颜色？
【发布时间】：2017-02-08 03:11:04
【问题描述】：

我使用 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'
    }
};

【问题讨论】：

标签： css reactjs

【解决方案1】：

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

【讨论】：

您好，感谢您的回复。我知道我可以使用外部 css 文件或将此内容添加到索引页面上的标题标签，但我不想这样做。我想以某种方式将它添加到我的 react js 文件中。
嗯，好的。那么你可以在你的渲染方法中放置一个部分。然后它将在您的 react.js 文件中。符合您的要求吗？
它不起作用。 SyntaxError：意外的令牌，应为 }。抱怨“outline”后面的“:”字符。

【解决方案2】：

在我浏览了 React 文档中的一些样式之后，似乎解决此问题的最佳选择是使用 Radium。

【讨论】：