how do I change the colour using CSS?
.container .input-group .opt-group {
width: 100%;
height: 100%;
border: 3px solid #ece5e5;
padding: 15px 20px;
font-size: 1rem;
border-radius: 30px;
background: transparent;
outline: none;
transition: .3s;
}
<html>
<body>
<div class="container">
<div class="input-group">
<select class="opt-group" name="gender" id="gender" required type="">
<option disabled selected required value="">Choose Your Gender</option>
<option value="male">Male</option>
<option value="female"> Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
</body>
</html>
After I applied CSS, it wouldn't change. What's the problem? Please give me a solution, and thanks in advance.
change color of what?
if text color is what you want then
color: red
add this to your css
If you want to change the background color of the container you can use below
background: blue; or background-color:blue;
If you want to change text color
color: green ;
Related
I have the following code which I wrote:
<div class="selectAorB" *ngIf="this.objects.length > 1">
<div>
<select (change)="this.AorB($event)">
<option value="None" >None</option>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</div>
</div>
<div class="selectNOT" *ngIf="this.objects.length == 1">
<div>
<select (change)="this.notChange($event)">
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
</div>
The css:
.selectAorB{
width: 50px;
margin-left: 370px;
margin-top: -41px;
border: 1px solid rgba(88, 109, 140, 0.5);
border-radius: 4px;
padding: 3px;
}
.selectAorB select{
display: block;
width: 50px;
background-image: url('../../../assets/icons/select_arrow.png');
background-repeat: no-repeat;
background-position: right center;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
overflow:hidden;
color: #1A3763;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-weight: normal;
Opacity: 70%;
}
.selectNOT{
width: 50px;
margin-left: 370px;
margin-top: -41px;
border: 1px solid rgba(88, 109, 140, 0.5);
border-radius: 4px;
padding: 3px;
}
.selectNOT select{
display: block;
width: 50px;
background-image: url('../../../assets/icons/select_arrow.png');
background-repeat: no-repeat;
background-position: right center;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
overflow:hidden;
color: #1A3763;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-weight: normal;
Opacity: 70%;
}
Currently, the code adds the selection boxes. If there are multi objects than it will show a box which user can choose None, A or B.
If there is only one object it will add a box which allows to use None or NOT.
The feature I'm trying to implement is to add the second box (None/NOT) beside the first box, in cases there are more than one object, so the HTML should look like:
<div class="selectAorB" *ngIf="this.objects.length > 1">
<div class="selectNOT" *ngIf="this.status == 'NOT'">
<div>
<select (change)="this.notChange($event)">
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
<br>
</div>
<div>
<select (change)="this.AorB($event)">
<option value="None" >None</option>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</div>
</div>
<div class="selectNOT" *ngIf="this.objects.length == 1">
<div>
<select (change)="this.notChange($event)">
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
</div>
But the problem I have is to change the CSS. Every property that I tried to change lead to strange behavior (boxes not in their places). I'm not sure which change I should make so it could work as expected (two boxes one by one). Hoping to hear some guidelines about what to do.
I am not sure that you actually need to have those divs in the first place, but perhaps you need those for something else you intend to do that is out of the context of this question. Also, a lot of your CSS seems unnecessary without seeing the rest of your source, such as the negative margins. So for the sake of simplicity I will ignore all of that.
To get both of the divs containing your selects onto the same line, simple float them with float: left such as in the following example:
.inline {
float: left;
margin-right: 5px;
}
<div class="selectAorB inline">
<div>
<select>
<option value="None" >None</option>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</div>
</div>
<div class="selectNOT inline">
<div>
<select>
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
</div>
For the code below, I have two problems:
The background image cereal.jpeg was working, now for some reason, it's disappeared and I can't figure why. Because it used to work, I know the file name and location are correct.
My controls refuse to remain sticky!
div.container {
border-style: solid;
border-width: thin;
border-color: grey;
box-shadow: 10px 15px 8px black;
height: 1500px;
width: 700px;
}
div.container::before {
background-image: url("cereal.jpeg");
background-repeat: repeat;
opacity: 0.05;
}
div.controls {
float: left;
width: 140px;
border: 1px solid lightgrey;
position: -webkit-sticky; // Safari
position: sticky;
top: 0;
}
div.thePlots {
float: left;
border: 1px solid lightgrey;
width: 400px;
height: 1400px;
}
<div id=container class=container>
<div class=controls id=controls>
<label id="brand">Brand:</label>
<br>
<select size=7 id="brandOptions" multiple>
<option value=0 selected>All</option>
<option value=1>Kellog</option>
<option value=2>Post</option>
<option value=3>Quaker</option>
<option value=4>General Mills</option>
<option value=5>Tree House</option>
<option value=6>CPW</option>
</select>
<br><br><br>
<label id="barsLabel">Error Bars:</label>
<input id=barsPresent type=checkbox value="Error Bars" checked>
<br><br><br>
<label id="label">Elasticity<br>Means:</label>
<br>
<select id="plotY">
<option value="efm" selected="selected">efm</option>
<option value="enm">enm</option>
</select>
<br><br><br>
</div>
<div class=thePlots id=thePlots>
The Plots<br>
<div class="tooltip" id="tooltip"></div>
<div id="plotshare" class="plotshare"></div>
<div id="plotprice" class="plotprice"></div>
<div id="plotsugar" class="plotsugar"></div>
<div id="plotmushy" class="plotmushy"></div>
</div>
</div>
opacity is too low.
Remove float:left;
Your div.controls element is sticking just fine, but it's sticking to the top of your container element. If you put it outside out your container element you will see it stick to the top of the page as desired.
Also, you will need to remove the // safari from your css. The correct syntax for commenting in css is /* comment */
For the background issue, there is no content for your background to display behind. You will need to add something to the before in order for the background to show.
Check this working fiddle which solves both problems
: https://jsfiddle.net/c5vrhf7t/1/
I am trying to change the background-color of my dropdown and I am trying to remove the border-radius.
This is the HTML:
<select name="liste" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" id="liste" aria-required="true" aria-invalid="false">
<option value="">---</option>
<option value="Brannvern og dokumentasjon">Brannvern og dokumentasjon</option>
<option value="Brannvarslingsanlegg">Brannvarslingsanlegg</option><option value="Røykvarslere">Røykvarslere</option>
</select>
This is the CSS I tried with:
select#liste {
border: 1px solid #e0e0e0 !important;
background-color: #ffffff !important;
border-radius: 0px !important;
height:37px;
line-height:37px;
}
But it is not working.
Here is a jsFiddle where you can see what I mean: https://jsfiddle.net/5g2y8eLm/
Thanks for your hjelp!
You can use background property in css to change background color;
select#liste {
border: 1px solid #e0e0e0 !important;
background-color: #ffffff !important;
border-radius: 0px !important;
height: 37px;
line-height: 37px;
outline: none;
}
<select id="liste">
<option>Option 1</option>
<option>Option 2</option>
</select>
For mine I did like that and it worked:
<select class="list">
<option>English</option>
<option>Français</option>
</select>
CSS:
.list{color:black; background-color:azure;}
To remove border, just set it's outline: none, and according to given example website, you already have a blue background on the dropdown.
select#liste {
background-color: #fff;
border-radius: 0px !important;
height: 37px;
line-height: 37px;
outline: none; /*Add this*/
}
Try below codes to change background color and color of font.
select#liste {
background-color: #111;
border-radius: 0px !important;
height:37px;
line-height:37px;
color:#fff;
outline:none;
}
<select name="liste" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" id="liste" aria-required="true" aria-invalid="false">
<option value="">---</option>
<option value="Brannvern og dokumentasjon">Brannvern og dokumentasjon</option>
<option value="Brannvarslingsanlegg">Brannvarslingsanlegg</option><option value="Røykvarslere">Røykvarslere</option>
</select>
Checkout this Setting background color of a selected HTML option element
It is working for chrome and mozilla.
He is using:
<select multiple="" class="form-control">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
<option>Option Four</option>
<option>Option Five</option>
</select>
select option:checked {
color: white;
background: #f26532 repeat url(data:image/png;base64,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);}
For the background data image use this data url maker to convert an image file with color(for me it was an orange image) to a data url then paste the code in the url( )
THIS WORKS !!!.
I am creating a monitoring system and I need the ability to select different amount of days. I want it styled kind of like this.
Previous [Dropdown here] Days
As you can see there is no border, I want the text to flow so if its 60 days there isn't lots of space to the right, when its 120/365 it looks okay but 2 digits has too much space on the right.
What is the best solution for this?
This is my HTML
<div class="col-md-12">
<h4>Previous
<select name="" id='daySelect'>
<option disabled='disabled' selected>Select Day</option>
<option value="30">30</option>
<option value="60">60</option>
<option value="90">90</option>
<option value="120">120</option>
<option value="365">365</option>
</select>
Days
(All Agencies)</h4>
</div>
This is my CSS
#daySelect {
width: 45px;
border: 1px solid transparent;
outline: none;
}
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Fiddle
i think this will help you
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
select {
-webkit-appearance: none;
-moz-appearance : none;
border:1px solid #ccc;
border-radius:3px;
padding:10px 10px;
text-justify: auto;
text-align: center;
}
}
</style>
</head>
<body>
<ul>
<select id="sel" name="sel">
<option value="o1">50</option>
<option value="o2">100</option>
<option value="o3">1000</option>
</select>
</ul>
<div id="mySelect"></div>
</body>
</html>
add text-align: center;
select
{
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
text-align: center;
}
Set this css:
option{ width:auto;overflow:hidden;}
it always works for setting dynamic width to text like <p> tags.
Also you can set this for <select> tag.
maybe some spaces? <option value="30"> 30</option> - considering it's a select(not so customizable)
Is it possible to define HTML + CSS such that only a change to the stylesheet is needed to specify whether a choice is represented as a drop-down combobox or a list of radio buttons?
I suspect the answer to this is simply 'no' (which is perfectly acceptable as an answer, if backed up with evidence), but hopefully there's a way.
Do you mean something like this? Not cross-browser and very rough though, you could switch by simply changing the class.
Demo Snippet:
select.radio {
-webkit-appearance: none;
-moz-appearance: none;
border: none; height: 1.5em;
}
select.radio, select.radio:focus { outline: none; }
select.radio > option { display: inline-block; }
select.radio > option::before {
content: '';
display: inline-block;
width: 12px; height: 12px;
border: 1px solid gray; border-radius: 50%;
margin-right: 4px;
vertical-align: top;
}
select.radio > option:checked {
color: #000;
background: -webkit-linear-gradient(#ccc, #ccc);
}
select.radio > option:checked::before {
background-color: #00f;
}
select.normal {
width: 120px;
}
select { margin: 16px; }
<select id="dl1" size="4" class="radio">
<option value="One">One</option>
<option value="Two" selected>Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
<select id="dl2" size="4" class="normal">
<option value="One">One</option>
<option value="Two" selected>Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
The answer is sort of "No". You can't redefine a SELECT input a a list of radio buttons. However, you could create two divs with the separtae inputs contained within, and then display or not display based on CSS.
<style>
#divSelect
{
display : none;
}
#divRadio
{
display : block;
}
</style>
<div id="divSelect">
<select id="MyChoice" name="MyChoice" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div id="divRadio">
1 <input type="radio" name="MyChoice" value="1"/><br/>
2 <input type="radio" name="MyChoice" value="2"/><br/>
3 <input type="radio" name="MyChoice" value="3"/><br/>
</div>
You can hide one or the other with CSS, but you will have to design your JS (or whatever is receiving this information) more robustly - Check both options and take data from the non-empty one.
Simply make one display and one not
HTML:
<div id="radios">
bar <input type="radio" name="foo" value="bar"/>
barbar <input type="radio" name="foofoo" value="barbar"/>
</div>
<div id="checks">
<select name="bar">
<option value="foo1">foo1</option>
<option value="foo2">foo2</option>
</select>
</div>
CSS:
<style>
#radios{
display:block;
}
#checks{
display:none;
}
</style>
What you can do is style the css for all selects and then change the style for radio buttons.
Kinda like this
select {
font-family: Cursive;
}
input[type=radio ]{
display : inline-block;
margin-left : -28px;
padding-left : 28px;
background : url('checks.png') no-repeat 0 0;
line-height : 24px;
}
here are some links that might help.
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
http://css-tricks.com/dropdown-default-styling/