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
Related
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.
In my SELECT when I select an option only the inner part becomes yellow. I would like the whole select field to turn yellow.
This is my code:
.bootstrap-select.btn-group .dropdown-toggle:not([title=""]) .filter-option {
background-color: yellow !important;
}
<select class="selectpicker form-control" data-size="40px" data-width="210px"
style="height: 80px" data-live-search="true" data-none-Selected-Text=""
data-hide-disabled="true" data-container="body" name="mittente_nucleo"
id="mittente_nucleo">
<option></option>
<option>1</option>
<option>2</option>
</select>
JSFiddle
You can change the background color with an jQuery event
$('#mittente_nucleo').on('change', function(){
var selected = $('#mittente_nucleo option:selected').val();
var element = $('button[data-id="mittente_nucleo"]');
element.css("background-color", "yellow");
});
JSFiddle https://jsfiddle.net/yrtd7oa4/
I am running angularJS project and i have taken HTML color picker, i want to assign the selected color from colorpicker to my div. Values should be hexa decimal.My code is as follows.
<input type="color" id="html5colorpicker" style="width:85%;">
<div>Testing for bachground color </div>
Or is there any other control which i can you use for the above purpose(Angularjs).
Just use background-color property and assign hexadecimal value to that
<div style="background-color: #a9a1a1;">Testing for bachground color </div>
EDITED
you need to use ng-style attribute to bind the style after the color selected from the color picker.
first use ng-model to get the selected color value
<input type="color" id="html5colorpicker" ng-model="mycolor" />
<div ng-style="divStyle">Testing for bachground color </div>
In the controller create a watch for ng0model variable and add the style to divStyle
$scope.divStyle = {
'background-color': 'white'
}
$scope.$watch('mycolor', function(val) {
$scope.divStyle = {
'background-color': val
}
});
DEMO
can anyone tell me how to pass the value what we select from list box.
list box code
<select size="10" id="myselection" ng-multiple="false" ng-model="selectedColors" ng-options="c.name for c in colors" style="width: 150px"></select>
<div>
Selected Colors: {{selectedColors.name}}
<br>
Selected Colors: <span ng-repeat="for color in selectedColors">{{color.name}}
</div>
passing value code
<div> ac-chart="chartType" ac-data="black" ac-config="config" id='chart' class='chart'></div>
in this instead of black we need to pass the selected value of listbox .
I have a a simple group of checkboxes generated by cakePHP's form
echo $form->input('Interest.interest_id', array('label' => __l('Interests'), 'multiple' => 'checkbox'));
There's a main Label called Interests and then a label for every checkbox generated, how do I apply a seperate class style to the labels of the checkboxes?
SNIPPET
<label for="InterestInterestId">Interests</label>
<input type="hidden" value="" name="data[Interest][interest_id]">
<div class="checkbox">
<input id="InterestInterestId8" type="checkbox" value="8" name="data[Interest][interest_id][]">
<label for="InterestInterestId8">Label of Checkbox</label>
</div>
My main objective is to have the checkbox display nicely inline infront of the label, but due to other styling it's not displaying like that in default
I see that you can distinguish your styling for the checkbox label as:
.checkbox input[type="checkbox"] {
display: inline;
}
.checkbox label {
display: inline;
}
That worked for me but I don't know what CSS you have for the other label that this label may be inheriting. Here is the working code:
http://jsfiddle.net/XBXVs/