Tapping a <select> element on most mobile browsers brings up a touch-friendly menu of options to choose from instead of the pointer-friendly dropdown you typically see on desktop/laptop browsers. This would make <select> ideal to use as navigation menus instead the often-implemented <ul> dropdowns. The problem is, no amount of CSS can produce a totally customized looking <select> on a desktop browser.
Is it possible to achieve the same behavior as a <select> element a on mobile browser using a <ul> dropdown without too much hackiness?
If not, how would one go about proposing some solution to this problem to a standards body?
You could possibly do the following:
Detect mobile device (based on size, using WURFL, or other tools). If mobile device, hide the standard ul dropdowns, change to selects. If you don't like the look of the selects, you can do something like this:
select {
-webkit-appearance: none;
background: url(some_nav_image.png) #ddd;
}
jsfiddle example: http://jsfiddle.net/h9UyZ/
To be quite honest, if styled correctly, these could even just be used for the main website as well as the mobile, and work nicely in all cases.
Related
I'm having an issue with the select drop down button in twitter bootstrap. It's happening in the two browsers I have installed on the machine (IE11, Chrome) and it's not just restricted to 'my sites'.
Here is a screenshot of the bootstrap website (OS: Windows 8.1 Broswer: Chrome) (http://getbootstrap.com/css/#forms-controls):
I have checked the console window and all resources are loading correctly.
Could anyone help me with why this is happening / steps to resolve?
TL;DR: you can't use CSS to change the icon. You'll have to use a library that implements a select-like control using HTML and JavaScript (at the expense of mobile-friendly selects on iOS and Android).
The icon displayed in <select> is determined by the user's browser or operating system. You can't change it using CSS.
Select display in Chrome on a Mac:
Select display in Chrome on a Mac with some styles removed:
I removed line-height, background-color, border, border-radius, and box-shadow. Note that the arrow has changed even though I didn't change any related style.
Select display in Chrome on Windows:
Notice that the icons are different, even though the code is the same.
Now what?
Although select isn'g very styleable, there are many libraries that provide a very customizable implementation of a select-like control. I like to use Bootstrap-select.
This library creates a <div class="caret"></div> that can be styled to change the icon. For example after including the Bootstrap-select JavaScript, the following code:
HTML
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
CSS
.caret{
color: red;
}
Gives me this display:
You'll lose mobile display, though:
Using a custom library will disable the mobile-friendly way iOS and Android implement selects, so make sure a custom icon is important enough to you before proceeding.
I found a solution to this, add this CSS and put 'form-override' class on each select dropdown:
.form-override {
appearance: auto !important;
}
I'm not sure why this works or why it's needed, just wanted to share how I was able to fix this problem. For me it seems to be sporadic, sometimes the problem occurs and I need this style setting to fix it, and sometimes it does not need this fix.
Use for select
select {
-moz-appearance: none;
background: rgba(0, 0, 0, 0) url("../images/dropdown.png") no-repeat scroll 100% center / 20px 13px !important;
border: 1px solid #ccc;
overflow: hidden;
padding: 6px 20px 6px 6px !important;
width: auto;
}
You can't style the <select> element itself at this moment. Every browser applies its own styling to most form elements.
So you can create your own custom select by hiding the original one, create markup, e.g. div with ul + li and live it up with javascript.
OR
If you don't mind using jQuery, try these libraries:
SelectBoxIt
Select2
Chosen
Bootstrap select
jquery-selectBox
jQuery UI
I have experienced that behavior with IE on Windows 8.1. For some reason IE renders the arrow differently as soon as you start to style the select element (which bootstrap themes usually do). Even something as simple as setting the background color triggers this behavior.
The only solution I've found so far is to style the arrow as needed. You can use the ::-ms-expand pseudo element for that. The following css rule should restore the "default" look:
select::-ms-expand {
background-color: #fff;
border: none;
}
I have read in a few other posts that creating a tappable link for a phone number can be done with tel: in an anchor tag
I would like to implement this in a responsive website.. something like this:
Call Us! <span>(555) 555-5555</span>
(the span tag I plan to use to hide the phone# with CSS)
The idea is that on a desktop you will only see "Call Us! (555) 555-5555", but not be an actual link
But when we scale down to mobile, you will then see a stylized link that just says "Call Us!" that you can click.
I'm sure there is a way to accomplish this with JavaScript or JQuery... but is there anyway to accomplish this with CSS Media Queries?
Note: Visual styling is no problem.. just looking for a reasonable solution for the "switching" concept.
Thanks in advance!
There really isn't anything wrong with leaving the link on desktop computers. This would for example allow you to click the link to call via Skype or other VOIP program you might have installed.
If you still want to change the link, just create two of them. One that is shown for desktops, the other for mobiles.
You could create 2 links, one to show on desktop and one for mobile
OR
Use css to style the anchor with phone number in them to default cursor so it does not look like a link even when you hover. To complement this, you need to use js to disable the click action.
This is all assuming you can detect what device you are on reliably.
I think your best bet would be to add an ID to your anchor tag and through your media query you can hide it on the desktop version there no need for the span.
Then for your non anchor text hide that when you are scaled down through another ID in a media query.
TEL: 123-456-789
#media screen and (min-width: 600px) {
.tel-link {
color: #000 !important;
text-decoration: none !important;
}
}
This will display the phone number in plain black for the browsers over 600px wide ( so it doesn't look like a link ) even though it still has a link. I think it's ok because you can make a call from PC nowadays.
I am developing a mobile website and testing on both iPhone and android phone.
I changed the appearance of select boxes on the page using CSS.
This displays good in the iPhone browser, but in Android does not apply the styles correctly.
The original dropdown arrow remains present (and is stretched vertically due to the height property).
Is there any way of telling the browser how to style this element on a android device? Or is it not supported?
Here is a sample of my code:
HTML:
<div class="filter-group">
<select class="bigInput" id="f_eventWho" name="f_eventWho" tabindex="1">
<option id="f_public" selected="selected">For Everyone</option>
<option id="f_private">By invitation</option>
<option id="f_both">All Gatherings</option>
</select>
</div>
CSS:
.bigInput
{width: 125px;
height: 50px;
background-size: 15px;
background: rgb(159, 209, 225) url(../img/small_down_arrow_20.png) no-repeat right;
border: none;
margin: 5px;
font-size: 14px;
}
There is no consistent way to style native selectboxes in browsers, let alone in mobile.
The best workaround I've found is to create an HTML dropdown that emulates the selectbox behavior - I highly recommend SelectBoxIt if you're using JQuery: http://gregfranko.com/jquery.selectBoxIt.js/
All you have to do is call $('select').selectboxit(); and it replaces all select boxes on the page with stylable html elements that behave the exact same way. Best of luck!
The best solution is to not try and style select elements, especially not on mobile devices.
Doing so is both damaging to usability and performance, it's raising your middle finger to visitors and letting them know you really don't care about them at all.
Please try and justify the enormous overhead (please look at what a lib like selectBoxIt will do to page-weight) you will be adding against the benefit you will provide to visitors (which is zero, at best).
When using responsive design, is there a way to still allow a user to view the full site?
E.g. They are viewing on an iPhone, but want to see the full site. They click a "Full Site" link, and it shows them the 1024px version.
If you're using media queries, only apply rules beneath a body element having the class 'responsive'.
#media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
If the user doesn't want to view the responsive layout, simply remove the 'responsive' class from the body element, nullifying all rules. You could persist the users preference by cookie or some other method as well.
Demo: http://jsbin.com/obaquq/edit#javascript,html
Reducing the window to no more than 500px will turn the text white, and the background blue. This is conditional on the body having the 'responsive' class. Clicking the first paragraph will toggle this class, and thus toggle the effects of the media query itself.
I've been wondering about this. I had success using jQuery to modify the viewport tag, seems to work fairly well from what I can tell so far. Doesn't require multiple stylesheets or a lot of extra CSS.
http://creativeandcode.com/responsive-view-full-site/
Haven't tried this, but thought about this issue myself. I imagine you could use a stylesheet switcher that deactivates the core responsive stylesheet, leaving the user with the full version
Switching stylesheets certainly isn't a new concept. Here is an article for ALA circa 2001 addressing switching stylesheets: http://www.alistapart.com/articles/alternate/
I'm trying to get the Thesis theme working in Wordpress, and it's almost perfect. For the navigation menu I want to use images instead of text. My solution to this was to set a background image via css:
ul.menu .tab-2 a {background:url(images/myimage.jpg) no-repeat;background-color:transparent;width:81px;height:60px;margin:0px;padding:6px;border-style:none;}
This works fine everywhere but IE. You only see the image and not the text that Thesis is writing out for that nav item:
<li class="tab tab-2">About Us<!--[if gte IE 7]><!--><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
In IE, however, the href text does show up over the background image. I suppose this is what I expected to happen, so I was pleasantly surprised to see it not working like that in every other browser.
What I'm trying to figure out is if there is a way to get the background image to show up on top of the href text, effectively blotting it out. I have tried hacking Thesis to suppress writing out the text, which works in all the menu items except one, and that is because I am writing out categories, not pages.
I really want to use Thesis' nav menu and not roll my own because I'm sure then I would have more troubles getting the drop downs to look nice in all browsers, and my css is just not that advanced. And I don't think there is a way to tell Thesis to use an image instead of text for the nav menu item.
I have been staring at this for hours and clearly am not thinking clearly about it anymore.
Try adding:
display:block;
text-indent:-5000em;
overflow:hidden;
... to your current rules.
Some folk prefer other ways to do image replacement, but this is the most common way IMO.