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}
|
onKeyDown={this.onKeyDown}
|
||||||
/>;
|
/>;
|
||||||
return (<div ref={p.ref}
|
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
|
(this.props.multiple
|
||||||
? ' '+(autocomplete_css.multiple||'')
|
? ' '+(autocomplete_css.multiple||'')
|
||||||
: (this.props.allowClear ? ' '+(autocomplete_css.withClear||'') : ''))}
|
: (this.props.allowClear ? ' '+(autocomplete_css.withClear||'') : ''))}
|
||||||
onClick={this.props.multiple ? this.focusInput : undefined}>
|
onClick={this.focusInput}>
|
||||||
{this.props.multiple
|
{this.props.multiple
|
||||||
? <div className={autocomplete_css.values}>
|
? <div className={autocomplete_css.values}>
|
||||||
<span className={autocomplete_css.inputElement+' '+autocomplete_css.sizer} ref={this.setSizer}>
|
<span className={autocomplete_css.inputElement+' '+autocomplete_css.sizer} ref={this.setSizer}>
|
||||||
|
|
|
@ -10,6 +10,11 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input.focused
|
||||||
|
{
|
||||||
|
box-shadow: inset 0 0 0 1px #7ab1ff;
|
||||||
|
}
|
||||||
|
|
||||||
.input:after
|
.input:after
|
||||||
{
|
{
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -150,8 +155,8 @@
|
||||||
left: auto;
|
left: auto;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
right: 28px;
|
right: 28px;
|
||||||
line-height: 18px;
|
line-height: 20px;
|
||||||
font-size: 18px;
|
font-size: 17px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0;
|
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