So I wanted a custom select box and I did the following :
html :
<div class="select">
<select name="Step_01_Roof_Width" onChange="GetWidth();" class="Step_01_SelectBox" id="Step_01_Select_Width">
</div>
css :
.select select
{
width: 300px;
background: transparent;
padding: 5px;
font-size: 10px;
line-height: 1;
border: 0;
border-radius: 0;
height: 19px;
-webkit-appearance: none;
}
.select
{
width: 270px;
height: 19px;
border-radius: 15px;
border: black solid 1px;
background: url(/wp-content/themes/blackbird/phpwizard/HTML5Application/public_html/images/Step_01/selectarrow.png) no-repeat right white ;
}
However, this only works for chrome and safari as far as I know, firefox and IE give some problems with this. You can view it here : http://www.solar-discounter.nl/uw-pv-systeem/ If anyone has any idea on how to achieve the chrome and safari example on firefox and IE, that would be such a big help to me!
Thanks for reading.
I think this is what you are looking for : How to remove the arrow from a select element in Firefox
Add opacity:0; to .select select and a div with position absolute before your select.
You can then update the div text with javascript/jquery.
Related
For an example, check out this fiddle (not in IE, please).
(You can see a description of the control at this link.)
She uses -ms-fill-lower and -ms-fill-upper to control the color on either side of the thumb, like this:
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
(source: brennaobrien.com)
However, as far as I can tell, the ... ::-ms- ... pseudo-elements only work in IE. In Chrome, the code above seems to have no effect. In Chrome, I just end up with this:
(source: brennaobrien.com)
What can I do to achieve this effect cross-browser?
Thanks!
You can achieve this effect using gradient, look here: http://codepen.io/ryanttb/pen/fHyEJ
For example:
input::-moz-range-track{
background: linear-gradient(90deg,black 50%,grey 50%);
}
Of course you need js as well to change percentage values.
For anyone else finding this - with HTML5 now standard background-size is a great option if you don't want the fading look of a gradient. I've built my ranges around the tutorial at https://www.w3schools.com/howto/howto_js_rangeslider.asp.
So my solution was in css:
.slidecontainer {
display:inline-block;
vertical-align:middle;
width: 60%;
position:relative;
margin:5px 0;
background:url('/images/cyan_back.png') no-repeat left top;
background-size:0 14px;
border-radius:7px;
}
Then with jquery:
$('.slidecontainer').css('background-size',$(this).val()+'% 14px');
I believe this is also a bit more cross browser friendly.
I'm using the following code to customize my select dropdown arrow:
HTML:
<span class="selectWrapper">
<select id="rowselect" class="pageinfoselect input-mini">
<option>...</option>
</select>
</span>
CSS:
span.selectWrapper {
position: relative;
display: inline-block;
width:65px;
}
span.selectWrapper select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #f5f5f5;
height:30px;
color:#666666;
border:1px solid #dddddd;
}
/* Select arrow styling */
span.selectWrapper:after {
content: url("../images/arrow_down.png");
position: absolute;
top: 0;
right: 0;
bottom: 0;
line-height: 30px;
padding: 0 7px;
background: #f5f5f5;
color: white;
border:1px solid #dddddd;
border-left:0px;
}
This works fine and replaces the default dropdown arrow but the problem is that the arrow image is not clickable. If I click on the select box it opens but I want it to open when I click the arrow image as well
Add the following rule
pointer-events:none;
EDIT:
It should be noted though that IE doesn't yet support this property (Although according to caniuse - It will be supported in IE11)
BUT, If you still want to this method you can use Modernizer or conditional comments (For IE < 10) and this css hack (for IE10) to make IE revert to the standard built in arrow.
/*target Internet Explorer 9 and Internet Explorer 10:*/
#media screen and (min-width:0\0) {
span.selectWrapper:after
{
display:none;
}
}
There is however a workaround (and also a different solution) for this, which I mention in my answer here - which also contains this Codepen
in internet explorer 10 (mobile version), a selectbox () gets highlighted blue as soon as it gets focused, (it´s the blue of the whole Modern UI surface of the phone). the styles for the select tag:
border-radius: 5px 5px 5px 5px;
font-size: 14px;
height: 25px;
letter-spacing: -1px;
float: left;
font-weight: 400;
padding: 0 5px 0 5px;
-webkit-appearance: none;
-ms-user-select: none;
background-origin: content-box, content-box;
background-repeat: no-repeat, repeat;
background-size: 11px 6px, 1px 160px;
background-position: right center, 0 -1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMAQMAAACz9bS7AAAABlBMV…vQuZgJjsYojkBJQf75i4cGzcXt5HJQ/Djs7L5sApGeVNPJDzbGEbOb/85rAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAlgCAIAAADGR8ryAAACZ0lEQ…tDzV5P+JnOAzg9qR2Xlg+a8jAvtyK/P5fSI6Sf3c3NhwADAJ0Rj8qbukvYAAAAAElFTkSuQmCC);
border: 1px solid #CCCCCC;
I was hoping the "-ms-user-select: none" would fix it, but didnt.. Has anyone experience similar?
I've encountered a similar problem on WP7 an WP8, the solution is to move focus from select box to fake input on click event.
jQuery:
$('select').on('click', function() {
$('input.fakeInput').focus().blur()
})
CSS:
.fakeInput {
display: block;
width:0;
height:0;
top: -999rem;
position: absolute;
}
Note: do not forget to add this code only for mobile device, on desktop browsers it will work not as expected.
IE has its own CSS pseudo-element to deal with this highlight.
CSS:
select::-ms-value{ background-color: transparent; color: black; }
You may read more about this on this page.
it´s interesting but since I add this line to my style sheet, it keeps highlighting blue, but doesn´t stay that way after you select something from the selectbox.
Thought I add it as an answer if somebody comes back with the issue.
:focus{outline: none;}
I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding style.
I have page with dark background. In IE, Firefox, Chrome and Safari my checkboxes looks like this:
But Opera displays checkboxes like this:
So user cannot see if he checked the checkbox, because the tick (check-mark) is black as well.
Here is part of my css:
body {
background-attachment: fixed;
background-color: #07080A;
background-image: url('images/bg.jpg');
background-position: center top;
background-repeat: no-repeat;
border: 0 none;
color: #FFFFFF;
display: block;
font-family: Arial;
font-size: 13px;
margin: auto auto;
width: 1000px;
}
input, textarea {
width: 300px;
color: #fff;
background-color: #323232;
border: none;
font-size: 13px;
font-family: Arial;
padding: 8px 0px 8px 10px;
}
input[type="checkbox"]{
background: transparent;
width: 30px;
}
How can I change that? I would like to have appearance of checkbox the same in Opera and other browsers.
Try to override your first style using:
input[type="checkbox"] {
background: inherit;
width: 30px;
}
This will give the checkbox the background of its parent. Depending on the order of your rules and other rules, you might need to use inherit !important.
In Opera, the background property applies to the background inside the checkbox not the background outside of the checkbox. I believe what you're trying to fix is some of the issues that you can find on this page about how checkboxes are styled.
input[type="checkbox"]{
backgorund: #fff;
width: 30px;
}
Does that not work for you?
First, you have a typo in your input[type="checkbox"] line.
Second, according to this you could explicitly set the checkbox background to be white. This works in Opera.