如何更改input/textarea的邊框顏色：focus？

我用的反應，我額外的CSS定義定位在js文件作爲這樣一個常數（希望這不是一個不好的做法）：如何更改input/textarea的邊框顏色：focus？

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' 
    } 
};

來源

2017-02-02 zappee

後我在React文檔中查看了一些樣式，似乎解決此問題的最佳選擇是使用Radium。

來源

2017-02-07 19:11:04 zappee

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

來源

2017-02-03 00:29:45

嗨，謝謝你的回覆。我知道我可以使用外部css文件或將此內容添加到索引頁上的標題標籤，但我不想那樣做。我想以某種方式將它添加到我的反應js文件中。 – zappee

好的。那麼你可以在你的渲染方法中放置一個部分。然後它會在你的react.js文件中。遵守你所尋找的是什麼？ –

它不起作用。 SyntaxError：意外的令牌，預計}。在「大綱」之後抱怨「：」字符。 – zappee

如何更改input/textarea的邊框顏色：focus？

回答

相關問題