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/
Related
I'm trying to create a select box but I don't want it to be a drop down. I'm sorta new to react in some forms.
Picture is attached of what I'm trying to do.
Should be straight forward to do the following:
Add css:
select {
overflow-y: auto;
}
Then make sure you use multiple="true" on the select
<select multiple="true" size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
No need for react really
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
Use case 1
I choose color from button = preview's color changes
I choose color from color picker works as well the preview changes
If i go to step one again the preview won't changes
it will only happen if i go to color picker then click the button
HTML
<!-- 1. Choose from the buttons listed -->
<div ng-repeat="color in colors">
<button style="background-color: {{ color }}"
ng-click="colorPicked(color)">
</md-button>
</div>
<!-- 2. Choose from the input field -->
<input type="text" name="fname" maxlength="7" ng-model="colorValue">
<!-- 3. Choose from color picker -->
<input id="input-color" value="#f9ad17" type="color" name="color"
ng-model="colorValue" ng-change="colorPicked(colorValue)"/>
<!-- Preview -->
<div style="background-color: {{ colorValue }}; width: 200px; height: 200px">
</div>
ColorController
$scope.colors = [
'#d13438', '#ffb900', '#00cc6a', '#107c10', '#2258af', '#70a3ed',
'#30363d', '#881798'];
$scope.colorPicked = function (color) {
$scope.colorValue = color;
}
}
UI
I have no idea what is the problem
Your error comes from this line:
ERRONEOUS
<input id="input-color" value="#f9ad17" type="color" name="color"
ng-model="colorValue" ng-change="colorPicked(colorValue)"/>
You don't need to set the attributes value and ng-change. The initialisation of the value should be done in the controller:
$scope.colorValue = '#f9ad17';
Since the value is binded you don't need the ng-change.
Here is a complete working fiddle
Change as so:
<input id="input-color" ̶v̶a̶l̶u̶e̶=̶"̶#̶f̶9̶a̶d̶1̶7̶"̶ type="color" name="color"
ng-model="colorValue" ̶n̶g̶-̶c̶h̶a̶n̶g̶e̶=̶"̶c̶o̶l̶o̶r̶P̶i̶c̶k̶e̶d̶(̶c̶o̶l̶o̶r̶V̶a̶l̶u̶e̶)̶"̶ />
$scope.colorValue = '#f9ad17';
The DEMO
angular.module('app', [])
.controller('Ctrl', function ($scope) {
$scope.colorValue = '#f9ad17';
$scope.colors = [
'#d13438', '#ffb900', '#00cc6a', '#107c10', '#2258af', '#70a3ed',
'#30363d', '#881798'
];
$scope.colorPicked = function(color) {
$scope.colorValue = color;
}
})
.color-button {
height: 20px;
width: 20px;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="Ctrl">
<!-- 1. Choose from the buttons listed -->
<span ng-repeat="color in colors">
<button style="background-color: {{ color }}"
class="color-button"
ng-click="colorPicked(color)">
</button>
</span><br>
<!-- 2. Choose from the input field -->
<input type="text" name="fname" maxlength="7" ng-model="colorValue">
<!-- 3. Choose from color picker -->
<input id="input-color" type="color" name="color" ng-model="colorValue" />
<!-- Preview -->
<div style="background-color: {{ colorValue }}; width: 200px; height: 200px">
</div>
</body>
First of all, don't use style and interpolate values as it may get overwritten. Instead use ng-style directive:
ng-style="{'background-color': colorValue}"
Second, ng-change directive is unnecessery on input-color
I am working on ionic and stucked on one point that I want ionic toggle button with Dropdown in a row.Means Toggle name then dropdown then button . I have created a PEN for this **http://codepen.io/anujsphinx/pen/aBBMVg** . Need help
Pointer events are turned off with CSS in ionic toggle. You have to override the css. I added class to toggle and used css to do that.
HTML:
<ion-toggle ng-repeat="item in settingsList"
ng-model="item.checked" ng-checked="item.checked" class="offPointer">
{{ item.text }}
<select>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
</ion-toggle>
CSS:
.offPointer{
pointer-events: all !important;
}
You can find the full code here. http://codepen.io/anon/pen/ZBLGeK?editors=1100
Let me know if this doesn't help you.
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 ;-)