I have a HTML Select drop down box, which I have styled, the problem I am having is that I can not seem to style the background color of the options. Below is a link to a demo as you can see the drop down options has a white background, which i am trying to change.
http://cssdeck.com/labs/lnroxrua
Here is my HTML Code:
<div class="select-div">
<select name="pagination">
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</div>
CSS Styling
select{
background:transparent;
width: 170px;
padding: 2px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:600;
color:#fff;
line-height: 1;
border: 0;
border-radius: 0;
height: 22px;
-webkit-appearance: none;
}
.select-div{
width: 170px;
height: 22px;
overflow: hidden;
background: url(arrowhead.png) no-repeat right #363636;
border-top:#575757 1px solid;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 8px 3px -9px #000000;
-webkit-box-shadow: 0px 8px 3px -9px #000000;
box-shadow: 0px 8px 3px -9px #000000;
}
Thanks
Here's a DEMO.
Just add this CSS rule:
select > option {
background: color;
}
For example:
select > option {
background: pink; /* Or an hexadecimal value */
}
Cheers,
Leo!
Unfortunately, webkit browsers do not support styling of tags yet.
check:
How to style a select tag's option element?
Related
I'm creating a custom sider toggle for an ant design project and I'm struggling to preserve three sides (i.e top, right, left) of the box-shadow (i.e. 2px 2px 8px rgba(0, 0, 0, 0.15)) and remove the box-shadow/blur entirely from the left side. My most recent attempt is below. Any thoughts?
JSX:
<span onClick={this.toggleCollapse} className="ant-layout-sider-zero-width-trigger">
{collapsed ? <Icon type="menu-unfold" /> : <Icon type="menu-fold" />}
</span>
LESS:
.ant-layout-sider-zero-width-trigger {
background: #fff;
color: #000000a6;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15), inset -2px 0px 0px #fff;
&:hover {
background: #fff;
}
}
btw I've seen similar questions on Stack but none worked for me after much experimentation.
An idea is to use another container and rely on some overflow:
.container {
display:inline-block;
padding:5px 5px 5px 0;
overflow:hidden;
}
.box {
width:200px;
height:50px;
background: #fff;
color: #000000a6;
box-shadow:
2px 2px 8px rgba(0, 0, 0, 0.15),
inset -2px 0px 0px #fff;
}
<div class="container">
<div class="box">
</div>
</div>
You could increase the offset of the shadow and reduce its size:
html {
background: white;
}
body {
padding: 2em;
margin: 2em;
background: yellow;
box-shadow: 4px 4px 8px -4px, inset -2px 0px 0px #fff;
}
Hi im trying to style my jquery autocomplete, all is well but when i tried to hover on the items its displaying on a bottom left side of my page, any suggestions to fix this? here is my css code.
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
I've got a weird situation. I'm using AngularJS to dynamically set the position of a range slider based on the current position in the video. If I style just the thumb (by enabling the bottom two calls below) the thumb moves along the slider in real time as expected. If I style the input[type="range"] as in the first section below, the thumb doesn't move dynamically unless you mouse over it.
I have tried other CSS styles of range inputs that I pulled from various websites, and I experience the same outcome each time. This seems to affect only Chrome. The weirdest thing is that IE works just fine (who would have thought?!) with the styled slider and the thumb moves along nicely.
input[type="range"] //::-moz-range-track //::-ms-track
{
outline:none;
background: rgb(127, 183, 219);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-wekkit-border-radius: 8px;
}
input[type="range"]::-webkit-slider-thumb// ::-moz-range-thumb ::-ms-thumb
{
outline:none;
-webkit-appearance:none !important;
width:20px;
height:20px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border:1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
input[type="range"] ::-webkit-slider-thumb:hover// ::-moz-range-thumb:hover ::-ms-thumb:hover
{
outline:none;
-webkit-appearance:none !important;
width:22px;
height:22px;
-webkit-appearance: none;
border-radius: 10px;
-moz-border-radius: 10px;
-wekkit-border-radius: 10px;
border: 1px solid rgba(127, 183, 219, 1.0);
background: #FFF;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
}
I want to get a textfield effect using CSS3 like this :-
I tried to do that using CSS3 but yet not succeeded to get exactly the same look, please find my code here in jsfiddle.net
CSS
.field {
-webkit-box-shadow: inset 0px 1px 4px 1px #929292;
-moz-box-shadow: inset 0px 1px 4px 1px #929292;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
width: 277px;
height: 18px;
border-top: #9f9e9e 1px solid;
border-right: #c9c9c9 1px solid;
border-bottom: #ececec 1px solid;
border-left: #c9c9c9 1px solid;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
outline: none;
padding: 6px 8px;
font-size: 13px;
line-height: 16px;
color: #333;
}
HTML
<input type="text" name="name" value="" class="field">
Thanks in advance.
It is difficult to define "exactly the same look". Any way, that is my try:
updated demo
I have changed box-shadow, and given it a second shadow
box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.3),
inset 0px -1px 1px 1px rgba(0, 0, 0, 0.2);
The key issue here is that you can set as many shadows as you want, even of the same kind (I mean both being "inset"). This way, you can get almost whatever you want. Even more, if you are using alpha in the colors.
By the way, I think you can drop -webkit-border-radius.
Can an inset box-shadow work on an inputfield?
JsFiddle: http://jsfiddle.net/hKTq2/
Yes, this is something I was working on the other day, it is indeed possible.
input
{
box-shadow:inset 0 0 5px 5px #888;
background: #fff;
}
You just need to have a background set for the shadow to fall onto :)
http://jsfiddle.net/Kyle_/ZCq6w/
In the meantime, this has become a common, though here's my "the perfect inset input".
input {
background: #fff;
color: #525865;
border-radius: 4px;
border: 1px solid #d1d1d1;
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
font-family: inherit;
font-size: 1em;
line-height: 1.45;
outline: none;
padding: 0.6em 1.45em 0.7em;
-webkit-transition: .18s ease-out;
-moz-transition: .18s ease-out;
-o-transition: .18s ease-out;
transition: .18s ease-out;
}
input:hover {
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
}
input:focus {
color: #4b515d;
border: 1px solid #B8B6B6;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
body {
background: #fff;
margin: 20px;
}
<input type="text" />
Yes you need to add :
background-color:transparent;
Hi ADD this css then you able to insert shadow
.innershadow{ -moz-box-shadow: inset 0 0 5px 5px #888; -webkit-box-shadow: inset 0 0 5px 5px#888; box-shadow: inset 0 0 5px 5px #888; height:15px; background-color:transparent; height:50px}
Just add background:none; on class .innershadow
http://jsfiddle.net/jack_fiddle/hKTq2/6/
you could do something like this to realize a inset dropshadow inside the text-input:
.innershadow {
font-size: 16px;
color: #999;
padding: 6px;
-moz-box-shadow:inset 2px 2px 5px #888;
box-shadow:inset 2px 2px 5px #888;
border: 1px solid #b8b8b8;
}
HTH,
--hennson