Select box shows some unreal background image in chrome only.
I used following css.
Please help me.
Thanks in advance.
select
{
font-size: 11px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 0 0 0 5px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../Images/select-ico.png") no-repeat scroll 96% center #fff;
}
Related
How can I get the box inside the buttons?
I use dojo toolkit and the button css is as follows:
.button0 {
margin: 2px;
padding: 0px;
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color: #ffec64;
border-radius: 9px;
border: 3px solid #ffaa22;
display: inline-block;
cursor: pointer;
color: #333333;
font-family: Arial;
font-size: 15px;
font-weight: bold;
text-decoration: none;
outline: none;
outline-color: transparent;
}
.button0:hover {
background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
background-color: #ffab23;
outline: none;
outline-color: transparent;
}
.button0:active {
position: relative;
outline: none;
outline-color: transparent;
}
What I want to remove is the 1px border that has the text.
can't be sure without seeing the html. I'm assuming the css class is on the button element like so
<button class="button0">
and that there are no nested element tags.
add:
.button0:focus{ outline: 0 }
may fix it.
note: for accessibility, its best not to remove the outline.
I have a selector created as a component:
<my-selector
...
</my-selector>
and this is its css file:
my-selector{
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px;
}
.select-container {
position:relative;
display: inline;
margin-right: 10px;
}
.select-container:after {
content:"";
position:absolute;
pointer-events: none;
}
.select-container:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: .5em;
right: .75em;
border-top: 5px solid black;
}
select::-ms-expand {
display: none;
}
}
The problem I've is the distance between the words and the left margin. I've tried margin-left, padding and others in order to remove it or make it smaller but without success.
Any suggestions?
You added the padding via the css for the selector:
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px; /* this is the problem, and it's overwriting the padding attribute 4 lines up */
}
you need to remove the first incidence of padding, then set padding to something like:
padding: 3px 26px 3px 5px; /* top right bottom left */
I want to create a range input that has a track bar shaped like a triangle, much like many volume inputs appear. Here is an example.
I have read this useful guide to styling the input, but it does not have information on changing the shape of the track bar.
I do not want to use a custom range slider with JS that alters the real input, I want to use the actual range input itself. It should also be mostly cross browser.
How can I accomplish this?
You cannot reliably change the shape of the track bar itself in a cross browser manner, but you can hide the track bar and position an element or image behind it. Here is an example of this being done.
HTML
<input type="range" class="font-size-selector pd-select" id="font_size_selector" min="12" value="20" max="100" step="1">
<span class="triangle-range-background-slider"></span>
CSS
/* Trangle */
.triangle-range-background-slider {
position: relative;
display: block;
margin-top: -27px;
height: 20px;
background: url('https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg');
background-size: 100% auto;
z-index: 1;
}
/* Input to work with triangle */
input[type=range] {
position: relative;
z-index: 3;
}
You could also use a CSS shape instead by removing the background image and placing this logic in there in it's place.
.triange-range-background-slider {
position: relative;
display: block;
margin-top: -27px;
border-top: 10px solid transparent;
border-right: 100px solid #3071a9;
border-bottom: 10px solid transparent;
z-index: 1;
}
Rest of the CSS is the Hide and Thumb from the CSS-Tricks link you provided.
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
Hide Input CSS
/* Hide */
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
Thumb Input CSS
/* Thumb */
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
// margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
I have a weird case where the caret for the twitter bootstrap select is not appearing after some customisation. I am therefore looking to restore the style for the select. These are the current styles:
#sidebar2 select {
max-width: 100%;
margin: 0px;
border: 1px solid #ccc !important;
outline: 0;
display:block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075) !important;
border-radius: 2px !important;
width: 100% !important;
height: 32px !important;
font-weight: 500;
-webkit-appearance: none !important;
-webkit-transition: none !important;
text-transform: none;
font: inherit;
vertical-align: top;
}
Because you use -webkit-appearance: none !important, it will make the caret disappear, you can try on mozzila and see the caret still there
I am having an issue with my dropdown menu in Internet Explorer 11.
There are blue lines at the top and bottom. I believe they correspond to the background color.
This is what it looks like
Here is the css that corresponds to it..
dropdown-menu {
color: #fff;
text-decoration: none;
background-color: #337ab7;
}
I am guessing it has to do with the height being off in the box, but I am unsure how I would correct that. Any help would be appreciated.
Edit: Looking through the css on the page my original thought of the code that was generating the dropdown menu was wrong. It's actually this.
.selection-cell {
width: 30.2969px;
height: 30px;
background: url('images/buttons/control.png') no-repeat;
background-color: #3498db!important;
background-position: 8px 8px;
border-radius: 3px;
overflow: hidden;
background-size: 13px 13px;
margin-bottom: inherit;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: 1px solid transparent;
cursor: pointer;
}
.selection-cell:hover{
background: url('images/buttons/control-selected.png') no-repeat;
background-position: 8px 8px;
background-size: 13px 13px;
border-color: #adadad;
}
.selection-cell option{
background: white;
/*border-left: 1px solid black;*/
-moz-clear: both;
-ms-clear: both;
clear: both;
-moz-box-shadow: none !important;
}