Styling a select that works in a regular browser. But when using the same select for a mobile (emulated in chrome) it looks like in the picture. Is there something i can to do make the select show all the options and also make it get rid of the black field, as in pic 2?
Pic 2:
<div class="styled-select">
<select id="TimeFrom" name="TimeFrom">
<option>08.00</option>
<option>09.00</option>
<option>10.00</option>
<option>11.00</option>
<option>12.00</option>
...
</select>
</div>
.styled-select select {
background: transparent;
width: 200px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 170px;
height: 34px;
overflow: hidden;
background: url(/Content/down_arrow_select.jpg) no-repeat right #ddd;
border: 1px solid #ccc;
}
Turned out it was just something wrong with googles emulator. When i tried it in an iPad it as it should.
Related
I am styling input[type=range] using CSS, and done with thumb and track.
All of three(-ms, -moz, -webkit) browser have proper prefix.
But, I don't know what vender prefix is suit to style progress on Webkit browser, such as Chrome.
On Internet Explorer and Microsoft Edge, -ms-fill-lower works great.
On Firefox, using -moz-range-progress solved the problem.
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 350px;
}
/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: -7px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ddd;
}
/* moz://a Firefox */
input[type=range]::-moz-range-track {
/* width: 150px;
height: 5px; */
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
}
input[type=range]::-moz-range-progress {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
/* Microsoft */
input[type=range]::-ms-track {
height: 2px;
/*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-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: 1px;
}
input[type=range]::-ms-fill-lower {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
input[type=range]::-ms-fill-upper {
background: #ccc;
border-radius: 10px;
}
input[type=range]:focus::-ms-fill-lower {
background: #44ddff;
}
input[type=range]:focus::-ms-fill-upper {
background: #ddd;
}
<input type="range" />
This example will work as I expected on Microsoft Edge, moz://a Firefox, and Internet Explorer, but looks differently on Chrome.
I already read Styling input range for webkit with pure CSS , and tried on mine,
but it works strangely when multiple input[type=range]s are on one document.
So, the question is,
Is there any proper vender prefix for styling track that thumb is already passed, only using CSS?
To the best of my knowledge, this isn't possible. Below is a snippet from Chrome showing the Shadow DOM elements for <input type="range" />:
<input type="range">
#shadow-root (user-agent)
<div style="-webkit-appearance:inherit">
<div pseudo="-webkit-slider-runnable-track" id="track">
<div id="thumb">
</div>
</div>
</div>
</input>
In general, you might want to take a look at range.css, it's a cross-browser code generator for custom range sliders. However, it doesn't provide a way to style the ::-moz-range-progress region. Other example's I've found, including this Codepen snippet, use the deprecated and no-longer-functional deep shadow-piercing selector. For a fully cross-browser solution, you'll have to make your own element.
This is what it looks like in chrome:
This is what it looks like in FF:
This is the css I have applied to this element:
.styled-select5 {
margin-left: 20px;
height: 12px;
border: 1px solid #cccccc;
overflow: hidden;
width: 104px;
z-index: 1;
background: url(/images/registration/triangle.png) no-repeat right white;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.styled-select5 select {
padding-right: 42px;
background: none repeat scroll 0 0 transparent;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: .01px;
text-overflow: '';
border: none !important;
width: 110% !important;
overflow: hidden;
z-index: 5;
height: 14px;
display: block;
padding-left: 3px;}
.styled-select5 select::-ms-expand{
display: none;}
.styled-select5 select option {
height: 20px;
width: 400px; }
.styled-select5.hidden {
display: none; }
I have been trying to figure this out for a while. In order for them to look similar I have to change the padding in FF to get the text to show properly. I am not sure why this is happening. Is there some difference in the way chrome and FF do this?
Each browser (on every OS) displays the HTML elements differently. The amount of styling that can override the defaults is also decided by the browser.
You cannot edit beyond what's permitted. If you happen to use selects for Safari, it'll look far more different and you cannot customize much there as well.
This question already has answers here:
iOS forces rounded corners and glare on inputs
(6 answers)
Closed last month.
I have a site which is working properly except for the input field and submit button next to it. They are not showing properly on iPad. The height of the input box is slightly more than the submit button, making it look weird.
What I think is that Safari mobile has different viewports(1024px) etc, but renders the same WebKit appearance as of Chrome. Then why the input box is showing different on iPad?
Here is how it looks in Google Chrome on my desktop:
And here is how it looks on iPad:
The HTML part goes simply as:
<div id="search-form">
<input id="Search" class="defaultText defaultTextActive" title="search shzamm!" type="text" spellcheck="false">
<input onclick="javascript:someFunction();" type="button" value="Go" class="search_btn">
</div>
And the CSS for the same is:
#search-form {
overflow: auto;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 26px;
}
input#Search {
-webkit-appearance: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.defaultText {
width: 88%;
padding-left: 4px;
height: 29px;
float: left;
background-color: #f7f7f7;
border-right: 0px solid #666;
border-bottom: 1px solid #666;
border-color: #999;
margin-right: -33px;
}
.defaultTextActive {
color: #999;
font-style: italic;
font-size: 15px;
font-weight: normal;
}
.search_btn {
font-size: 13px;
font-weight: bold;
height: 34px;
cursor: pointer;
float: right;
margin: 0;
width: 33px;
background: url("../images/search.jpg") no-repeat;
text-indent: -99999px;
border: 1px solid #999;
border-top: 2px solid #000;
margin-top: 0px;
margin-right: 1px;
}
As you can see, the border effects of input are also not being rendered properly in iPad. Anyone have any clue about it?
This snippet of CSS will remove the default WebKit styling from your textboxes:
input[type="text"] {
-webkit-appearance : none;
border-radius : 0;
}
Works on iOS 7 too.
Try to use -webkit-appearance to get rid of the default styles.
Check this answer: iOS forces rounded corners and glare on inputs
I am trying to style my css dropdown box using only css...
First of all my dropdown have the custom html arrow down, i am trying to put an image on my css to take this default arrow down so i can put my own image to it but i have no idea how to do it...
This is my css for the dropdown box:
select {
height:32px;
line-height:42px;
width: 88%;
}
How can i put my own image to this code? I also tried following tutorial but its no use for me i can't make it work right...
http://bavotasan.com/2011/style-select-box-using-only-css/
The tutorial works for me very well.
I created a fiddle for you to understand, but you have to understand what the author want to say.
HTML code
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
CSS code
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url('http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg') no-repeat right #ddd;
border: 1px solid #ccc;
}
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
http://jsfiddle.net/zNCBY/
Hi I am trying to make my DropDownList like this in my ASP.NET web application.
I cant't use the select tag because I am already bounded some data to the DropDownList.
Basically I am trying to remove the default arrow button from the DropDownList and add this image as background. There is any way to do this using CSS.
This is the css I have used
.drop-down-style
{
width:150px;
height:20px;
border:solid 2px #a3a4a6;
background-image:url('../Images/DropDownImage.gif');
}
Something like this?
CSS:
.styled-select {
width: 308px;
height: 23px;
overflow: hidden;
background:url(arrow_xs.png) no-repeat 225px #FFF;
border: 1px solid #ccc;
}
.styled-select select {
background: transparent;
width: 309px;
padding-right: 4px;
padding-bottom:7px;
padding-left: 4px;
padding-top: 0px;
font-size: 12px;
line-height: 1;
border: none;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
HTML
<div class="styled-select">
<select>
<option>First option</option>
<option>Second option</option>
</select>
</div>
edit: You can add an arrow with positioning (div).
edit I put this in a jsfiddle for you: http://jsfiddle.net/X4J3L/1/
rather then use some third party plugins or jquery scripts , you should use ajax toolkit's combo box. see an example here
Combo box example