How to change CSS for SELECT dropdown component in react ant design?
up vote
0
down vote
favorite
I want to change CSS for dropdown options.
<Select
showSearch
placeholder="Select a Person"
className="NameList"
onChange={this.handleChange}
value = {this.state.value}
optionFilterProp="children"
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{this.renderOptions()}
</Select>
renderOptions() {
return this.props.names.map((v) => {
return <Option value={v.id}>{v.vehicleno}</Option>
})
}
here I'm using separate CSS file:
.NameList .ant-select-selection{
border: none;
border-radius:0px;
width: 150px}
I'm getting output as:
enter image description here
I want to make dropdown options look like this:
html css reactjs css3 drop-down-menu
asked Nov 11 at 6:47
Vedika Basarkar
12
add a comment |
up vote
0
down vote
favorite
I want to change CSS for dropdown options.
<Select
showSearch
placeholder="Select a Person"
className="NameList"
onChange={this.handleChange}
value = {this.state.value}
optionFilterProp="children"
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{this.renderOptions()}
</Select>
renderOptions() {
return this.props.names.map((v) => {
return <Option value={v.id}>{v.vehicleno}</Option>
})
}
here I'm using separate CSS file:
.NameList .ant-select-selection{
border: none;
border-radius:0px;
width: 150px}
I'm getting output as:
enter image description here
I want to make dropdown options look like this:
html css reactjs css3 drop-down-menu
asked Nov 11 at 6:47
Vedika Basarkar
12
Without an output we cannot help you. What is the HTML structure of the select ? I guess there are someulandliinvolved or divs ? and what is the result of your ' tried ' code ?
– Mihai T
Nov 12 at 9:49
Added description which you asked. There is option tag in renderOptions() function. Also added how my output looks.
– Vedika Basarkar
Nov 13 at 10:15
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I want to change CSS for dropdown options.
<Select
showSearch
placeholder="Select a Person"
className="NameList"
onChange={this.handleChange}
value = {this.state.value}
optionFilterProp="children"
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{this.renderOptions()}
</Select>
renderOptions() {
return this.props.names.map((v) => {
return <Option value={v.id}>{v.vehicleno}</Option>
})
}
here I'm using separate CSS file:
.NameList .ant-select-selection{
border: none;
border-radius:0px;
width: 150px}
I'm getting output as:
enter image description here
I want to make dropdown options look like this:
html css reactjs css3 drop-down-menu
asked Nov 11 at 6:47
Vedika Basarkar
12
I want to change CSS for dropdown options.
<Select
showSearch
placeholder="Select a Person"
className="NameList"
onChange={this.handleChange}
value = {this.state.value}
optionFilterProp="children"
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{this.renderOptions()}
</Select>
renderOptions() {
return this.props.names.map((v) => {
return <Option value={v.id}>{v.vehicleno}</Option>
})
}
here I'm using separate CSS file:
.NameList .ant-select-selection{
border: none;
border-radius:0px;
width: 150px}
I'm getting output as:
enter image description here
I want to make dropdown options look like this:
html css reactjs css3 drop-down-menu
html css reactjs css3 drop-down-menu
asked Nov 11 at 6:47
Vedika Basarkar
12
asked Nov 11 at 6:47
Vedika Basarkar
12
edited Nov 13 at 10:12
asked Nov 11 at 6:47
Vedika Basarkar
12
asked Nov 11 at 6:47
Vedika Basarkar
12
asked Nov 11 at 6:47
Vedika Basarkar
12
12
Without an output we cannot help you. What is the HTML structure of the select ? I guess there are someulandliinvolved or divs ? and what is the result of your ' tried ' code ?
– Mihai T
Nov 12 at 9:49
Added description which you asked. There is option tag in renderOptions() function. Also added how my output looks.
– Vedika Basarkar
Nov 13 at 10:15
add a comment |
Without an output we cannot help you. What is the HTML structure of the select ? I guess there are someulandliinvolved or divs ? and what is the result of your ' tried ' code ?
– Mihai T
Nov 12 at 9:49
Added description which you asked. There is option tag in renderOptions() function. Also added how my output looks.
– Vedika Basarkar
Nov 13 at 10:15
Without an output we cannot help you. What is the HTML structure of the select ? I guess there are some
ul and li involved or divs ? and what is the result of your ' tried ' code ?– Mihai T
Nov 12 at 9:49
Without an output we cannot help you. What is the HTML structure of the select ? I guess there are some
ul and li involved or divs ? and what is the result of your ' tried ' code ?– Mihai T
Nov 12 at 9:49
Added description which you asked. There is option tag in renderOptions() function. Also added how my output looks.
– Vedika Basarkar
Nov 13 at 10:15
Added description which you asked. There is option tag in renderOptions() function. Also added how my output looks.
– Vedika Basarkar
Nov 13 at 10:15
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246475%2fhow-to-change-css-for-select-dropdown-component-in-react-ant-design%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Without an output we cannot help you. What is the HTML structure of the select ? I guess there are some
ulandliinvolved or divs ? and what is the result of your ' tried ' code ?– Mihai T
Nov 12 at 9:49
Added description which you asked. There is option tag in renderOptions() function. Also added how my output looks.
– Vedika Basarkar
Nov 13 at 10:15