Add focused style, remove input.css, make it focus on 'v' click
parent
ce9c0fb774
commit
6b9dbe3b73
|
@ -213,11 +213,13 @@ export default class Selectbox extends React.PureComponent
|
|||
onKeyDown={this.onKeyDown}
|
||||
/>;
|
||||
return (<div ref={p.ref}
|
||||
className={autocomplete_css.input + (this.props.disabled ? ' '+(autocomplete_css.disabled||'') : '') +
|
||||
className={autocomplete_css.input +
|
||||
(p.focused ? ' '+(autocomplete_css.focused||'') : '') +
|
||||
(this.props.disabled ? ' '+(autocomplete_css.disabled||'') : '') +
|
||||
(this.props.multiple
|
||||
? ' '+(autocomplete_css.multiple||'')
|
||||
: (this.props.allowClear ? ' '+(autocomplete_css.withClear||'') : ''))}
|
||||
onClick={this.props.multiple ? this.focusInput : undefined}>
|
||||
onClick={this.focusInput}>
|
||||
{this.props.multiple
|
||||
? <div className={autocomplete_css.values}>
|
||||
<span className={autocomplete_css.inputElement+' '+autocomplete_css.sizer} ref={this.setSizer}>
|
||||
|
|
|
@ -10,6 +10,11 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.input.focused
|
||||
{
|
||||
box-shadow: inset 0 0 0 1px #7ab1ff;
|
||||
}
|
||||
|
||||
.input:after
|
||||
{
|
||||
border: 0;
|
||||
|
@ -150,8 +155,8 @@
|
|||
left: auto;
|
||||
top: 4px;
|
||||
right: 28px;
|
||||
line-height: 18px;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
49
input.css
49
input.css
|
@ -1,49 +0,0 @@
|
|||
.input
|
||||
{
|
||||
background: white;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-radius: 0;
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
color: rgb(33, 33, 33);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inputElement
|
||||
{
|
||||
font-size: inherit;
|
||||
border: 0;
|
||||
padding: 0 2em 0 .5em;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inputElement:focus
|
||||
{
|
||||
box-shadow: inset 0 0 0 1px #4196d4;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input.inputElement
|
||||
{
|
||||
line-height: 200%;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.inputElement::-ms-clear
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bar
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bar:after, .bar:before
|
||||
{
|
||||
display: none;
|
||||
}
|
Loading…
Reference in New Issue