I'm trying to style the selected option in a dropdown list. I've found a way to change the background colour but I need to change the text colour. I really could do with doing by css.
nav select{
-webkit-appearance: none;
-moz-appearance:none;
appearance: none;
background: #66822e url(../images/arrow.png) no-repeat right top;
color: #ffffff;
font-size: 100%;
height: 21px;
border: 0;
}
nav option:checked, nav option:hover {
color: #910000 !important;
background: #d1e40a repeat url("data:image/jpeg;base64,/9j/4AAQ...");
}
Is there a way to get the selected text to show in a shade of red? I'm testing in Firefox. Here is a fiddle:
https://jsfiddle.net/urbbjrbg/
Related
How do i remove the blue background when active on an option and hovering on an option with my select dropdown.
Here is a screenshot of what i mean:
I have tried every css rule i could thin off and even search the internet, including here but nothing is working
.language {
float: right;
margin-top: -45px;
padding-right: 25px;
}
.language select {
width: 180px;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
cursor: pointer;
}
.language select::-ms-expand {
display: none;
}
.language option {
background-color: #000;
color: #fff;
}
.language option:hover {
background-color: #000;
color: #fff;
}
.language-selector::before {
font-family: "Font Awesome 5 Free";
content: "\f0ac";
visibility: visible;
font-weight: 900;
position: relative;
float: left;
margin-left: 1690px;
margin-top: -53px;
}
<div class="language">
<select>
<option value="">English</option>
<option value="">Deutsch</option>
</select>
</div>
Well, you can't. This is set by the OS. Sorry :/
Try this
:focus {outline:0 !important;}
and this
:hover {outline:0 !important;}
If this is not working try on ur own css style !importent this will overwrite all the normall css
Good luck :)
Usually you'd use background: transparent but you have to tell us the rule that's setting the blue color or if it's the OS/browser as someone else mentioned, tell us which OS/browser. Dropdown attributes can't always be styled as many are set by the browser (see the diff between them in Firefox and Chrome). The solution for complete style control is unfortunately to create your own dropdowns using a trigger and list of items you toggle visibility and handle the user's selection.
hi It's happend for me and this is mt solution {background: transparent !important;}
I am trying to add a CSS button to my code, but the background colour of the button is not changing.
Here is my CSS code for the button:
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
Here is the HTML code I currently have:
<div>
Click here
</div>
The background of the button remains the standard white colour no matter what I set the background-color to. This is the current button, but I would like to change the background.
This is exactly your code. How you can see it works.
I think in your project is another CSS which overwrites your background-color.
You can use the developer tools (F12) to check which part of your CSS is responsible for the background-color.
chrome dev tools (inspecting html)
chrome dev tools (inspecting css)
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
Override other css:
.button{
background: red! important
}
Either your CSS is being overridden by another class that you haven't showed us or your browser is caching the incorrect result. If you are using Chrome:
Right click your page and click "Inspect"
In Inspector there should be a "Network" tab listed. Click it.
Inside of that tab, there should be a checkbox for "Disable Cache". Check it
Refresh your page with this option checked.
If that doesn't work then it is likely being overridden somewhere.
Yes. There's nothing wrong with the code. Maybe you shouldn't have rendered your css properly or used the same class name for lot of elements. I've also tried it with your code. It's good.
.button {
background-color: blue;
border: 2px solid red;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
I have a button . When I click on it, some weird dotted lines show up like this which I cannot remove. Tried everything I know in CSS but cannot fix. Please Help.
Here is my css:
input.filterIcon {
width: 32px !important;
height: 32px !important;
background: url(../images/filter-icn.png) no-repeat center right !important;
padding: 0px !important;
cursor: pointer;
float: right;
vertical-align: middle;
margin: 0 0 0 10px !important;
font-size: 12px;
letter-spacing: 0.5px;
position: fixed;
z-index: 99999;
top: 70px;
right: 15px;
outline: 0 !important;
}
Here is my html
<form id="search_form">
<input type="button" class="filterIcon" id="iconfilter">
</form>
Anchor links ('s) by default have a dotted outline around them when they become "active" or "focused".
If you want it gone, and you want it gone on every single anchor link, just include this as a part of your CSS reset:
a, button {
outline: 0;
}
a:hover, a:active, a:focus {
/* styling for any way a link is about to be used */
}
Firefox Inputs Clicking down on an input type=image can produce a dotted outline
To remove it: input::-moz-focus-inner { border: 0; }
Source : https://css-tricks.com/removing-the-dotted-outline/
Difficult to determine without any additional info but try adding this to the button’s css
outline: 0;
Its because of outline, you can try this code.
button, button:hover, button:focus, button:active,
a, a:hover, a:focus, a:active {
outline: 0;
}
The dotted border is there for accessibility reasons as a visual clue of what has been selected (clicked on). You can get rid of this easily by adding this CSS to the elements (class name depends on the element):
.button {
outline: none;
}
outline on the Mozilla Developer Network:
The outline CSS property is a shorthand for setting various outline properties in a single declaration: outline-style, outline-width, and outline-color.
You can remove the outline with this code:
outline: none;
I have a tabbed pane in my HTML page. The following changes has to done in the task.
When select a tab or hover, background - white, text color - #6baed9, border - 1px same color as text.
When tab is unselected (if selected the another tab this become unselected one) - background - #6baed9, text color - white, border - 1px same color as text.
My CSS are as following,
#my_settings ul.tab li a {
display: inline-block;
text-align: center;
padding: 8px 12px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
height:35px;
width:250px;
color: #6baed9;
}
#my_settings ul.tab li a:hover {
background-color: #fff;
color: #6baed9;
border: 1px solid #6baed9
}
#my_settings ul.tab li a:focus, .active {
background-color: #fff;
color: #6baed9;
border: 1px solid #6baed9
}
Issues I have :
In this when is case 2 above, I cant get the white text color when tab is not selected.
The border of the selected tab is fine but the bottom line is not showing.Why is that.
Please help me to do this.
PS : When I try to change #my_settings ul.tab li a { to color : #fff, works fine. But when I click somewhere in the page the selected tab's color(#6baed9) trun to white.
$(".tab").click(function() {
$(".tab").removeClass('selected')
$(this).addClass('selected')
})
$(".tab").hover(function() {
$(".tab").removeClass('selected')
$(this).addClass('selected')
})
.tab {
width: 60px;
height: 60px;
background: #3be9a6;
margin: 20px;
display: inline-block;
float: left
}
.selected {
background: #3b6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>
<div class="tab">6</div>
<div class="tab">7</div>
you can use set up like snippet above.use jquery to insert class wich has the property that you want to have changed on hover or click.
Are you setting the <li class="active"> for the active tab?
I need to change the background of the drop down box
<select>
<option value="Chrome">Google Chrome</option>
<option value="Fire Fox">Fire Fox</option>
<option value="Opera">Opera</option>
</select>
1)Below is the CSS
2)i can give background but it will be display like below link http://jsfiddle.net/vamsivelaga/9bt5vncg/
select{
float: left;
width: 100px;
height: 26px;
border: 1px solid #d4d4d4;
margin: 10px 0 0 10px;
text-overflow: '';
background: url(http://s24.postimg.org/lyhytocf5/dropdown.png) no-repeat right 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
-ms-appearance: none;}
If you want to change the color of the background, just add some color at the end of "background".
For example
.drop_down_style{
background: url(http://s24.postimg.org/lyhytocf5/dropdown.png) no-repeat right #000;
}
The above code adds black color and replaces the default image with the url which is provided.
You can refer to this link if needed.