I have a select dropdown using ChakraUI, it like:
<Select color={"white"} bg={"black"}>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</Select>
When I click to dropdown, the option has both textColor and bgColor is white.
I want to change option appear that textColor is black and bgColor is white.
I have set color, bgColor in option field but it not working
You will need to style the <option>s:
<Select bg="black" color="white">
<option style={{ color: 'black' }} value="option1">
Option1
</option>
<option style={{ color: 'black' }} value="option2">
Option2
</option>
</Select>;
Note that if you add a placeholder to <Select>, it will still be white on white when opened.
Another curious thing is that this problem does not happen in Safari, there the dropdown looks just like a standard OS menu.
Related
how to change border color, only with not selected and required ???
this component on angularJS, is required, I need to change border color, while the user doent select an item, can I do this ???
<div class="form-group">
<label>Cliente</label>
<select chosen id="idCliente" name="idCliente" class="chosen-select"
disable-search="false" ng-model="item.idCliente"
ng-options="cli.Cliente for cli in clientes" required="">
</select>
</div>
select.ng-invalid {
border-color: red !important;
}
Add the above CSS in the project border will be in red color, when validation fail
Here's my Codesandbox
Now I change the title when user select an item on selectList(antd component) using e.target.textContent.
is there any way that i can show all the values, now I'm only able to show one select list value.
I want something like this : value from first dropdown / value from second dropdown
<DropDown>
<DropDown.DropDownTitle>
This title will update after user selection // this should be updated when user select
</DropDown.DropDownTitle>
<DropDown.DropDownBody>
<Select
defaultValue="lucy"
style={{ width: 120 }}
onChange={handleChange}
>
<Option value="jack">another</Option>
<Option value="lucy">another 2</Option>
</Select>
<Select
defaultValue="lucy"
style={{ width: 120 }}
onChange={handleChange}
>
<Option value="jack">another 3</Option>
<Option value="lucy">another 4</Option>
</Select>
</DropDown.DropDownBody>
</DropDown>
I can see you're using antd, I believe it's better to use Select with multiple selection, it will set the values the way you want it.
here's their sandbox: https://codesandbox.io/s/cpive
I my code I am using ant Design (antd). In my drop down list I am using <span> tag to dispaly my listings as two columns.
<Select value={'AccountID'} style={{'width':'212px','height':'32px'}} placeholder="Select An Accounts">
<Option disabled value='0'>Select An Account</Option>
{this.props.accountList.length && this.props.accountList.map((value,index)=>(
<Option value={value.AccountID} key={index}>
{value.Name} <span style={{float:'right'}}> {value.TypeName} </span>
</Option>
))}
</Select>
The problem is when I select a long option like Freight and Shipping Costs
, after selecting CostOfGoodsSold is displayed outside the conttrol as shown below.
As an alternate solution,
If I increase the with of the select tag:-
there is no space showing between the two values after selection. I need space between values.
How to overcome this issue?
PS: any other CSS not applied.
Demo: sandbox
As per your requirement I would like to use percentage to resolve your issue,
there is one property called dropdownStyle in antd which you can use to design the options of the dropdown.
so, by applying
dropdownStyle={{ minWidth: "50%", height: "32px" }}
You should be able to get the options added.
Here is what your select looks like
<Select
placeholder="Select An Account"
dropdownStyle={{ minWidth: "50%", height: "32px" }}
style={{ minWidth: "50%", height: "32px" }}
>
<Option value="1">
Freight and Shipping Cost
<span style={{ float: "right" }}> Cost of Goods Sold</span>
</Option>
<Option value="2">
Sales
<span style={{ float: "right" }}> Income</span>
</Option>
</Select>
after selecting the dropdown there is no property I can find to overwrite so you need to apply css to that. for selected item.
.ant-select-selection-selected-value {
width: 100%;
}
Demo of sandbox
Hello I am new to Reactjs.I am trying to hide a Select tag with div classname(DropDownButton3) till option (Three) in select tag with div classname(DropDownButton2) is selected.Here are my .jsx and css files please help me.
.jsx
<div className='DropDownButton2'>
<label style={{marginTop: '20px'}}>Second</label>
<br/>
<select defaultValue={-1} style={{width: '300px', height: '35px'}}>
<option disabled value={-1}> </option>
<option value='One'>One</option>
<option value='Two'>Two</option>
<option value='Three'>Three</option>
</select>
</div>
<div className='DropDownButton3'>
<label className='hide' style={{marginTop: '20px'}}>Third</label>
<br/>
<select className='hide' defaultValue={-1}>
<option disabled value={-1}> </option>
<option value='A'>A</option>
<option value='B'>B</option>
</select>
</div>
.css
.DropDownButton2 {
grid-column: 3;
grid-row: 2/3;
}
.DropDownButton3 {
grid-column: 3;
grid-row: 3;
}
implement
change = (event)=> {
this.setState({selectedButton: event.target.value});
};
add
<div className='DropDownButton3' style={{display: this.state. selectedButton === "Exchange" ? "block" : "none" }}>
and add onChange to DropDownButton2. and this should work perfectly fine.
Assuming you have the values of the dropdowns stored in state, try the following:
<div className='DropDownButton3'
style={ {display: this.state.dropdown2 === "Three" ? "block" :
"none"} }
>
You can also use the classnames plug in if you wanted to do more style than just hiding it.
https://www.npmjs.com/package/classnames
EDIT: I'm assuming there is a state involved because there must be something controlling the state of the select.
I want to deploy a select box where entries would be colored differently depending on the data. Here is a sample HTML:
<select class="form-control" ng-model="New_Request.SN" id="SN" style="width:140px">
<option ng-repeat="One_Board in Child_Boards" value="{{One_Board.SN}}">
<div ng-style="({{One_Board.Status}} == 'Y' ? font-color:black : font-color:red)">{{One_Board.SN}}</div>
</option>
</select>
So, each entry has the structure {"SN":"<value>","Status":"<status>"}. So, each entry whose status is 'Y' would be shown in black, and any entry with a status different from 'Y' would be shown in red.
I can't figure out what should be the correct syntax.
Please try this:
<select class="form-control" ng-model="New_Request.SN" id="SN" style="width:140px">
<option ng-repeat="One_Board in Child_Boards" value="{{One_Board.SN}}" ng-class="{redcolor: One_Board.Status != 'Y'}">
{{One_Board.SN}}
</option>
</select>
And in your CSS:
option {
color: black;
}
.redcolor {
color: red;
}
But maybe changing font-color to color alone will do the trick as well ;-)