So I've been working on a HTML5 iPad application for work and have come across a problem. I didn't have access to an iPad whilst first working on this app and relied on desktop Safari to get my app quickly together (probably not the best thing, anyhow...)
I'm having to rely on a input range for a part of the interface. After seeing that HTML5 had a range input, I was happy as this is just what I needed. I even managed to style it up to exactly what was designed:
This is great! ...until I actually tried it on an iPad and it doesn't work. Just shows a text input. I'm now wondering what to do... I do need a slider, something that when dragged, it spits out the data. Obviously needs to work with touch. After looking around all over the web, there doesn't seem to be a solid solution.
What do you guys suggest here? What's the proper way of coding up a working touch-friendly slider, just like the native HTML5 one that it doesn't support!?
Any ideas/thoughts/knowledge/experience would be greatly appreciated!
James
I tested all the proposed "solutions" and found them all lacking.
All are excessively bloated, some change your existing markup or force unnecessary CSS styles.
So I crafted my own solution in 2kb of JavaScript (minified).
Try it (on your mobile device): https://range-touch.herokuapp.com
Code: https://github.com/dwyl/range-touch (concise and commented)
To get this working in your own project all you need to do is include the range-touch.min.js file in your page/template.
Magically <input type="range"> works on all mobile devices.
You can style the slider & button how ever you like.
I've included sample styles in the optional/style.css
Note: this solution Assumes you have JQuery or Zepto.js
You could have a look over http://jqueryui.com/demos/slider/ .
Try accessing the page on the iPad and see if it's touch friendly.
I have exactly the same problem, only with an iPhone.
This is because Mobile Safari only supports a subset of HTML5. I am using JqTouch which is causing me all manner of issues so do avoid this framework.
Take a look at jquery mobile. Its currently Alpha 3, but has a slider control which works on iOS.
Hope this helps you a little.
Try this one - https://github.com/freqdec/fd-slider. Even the tooltip on the demo page is working on mobile safari - http://www.frequency-decoder.com/demo/fd-slider/tooltip/.
There's a fix for rangeinput from jquerytools for touch devices: https://github.com/Patrick64/jquerytools/blob/dev/src/rangeinput/rangeinput.js
Works like a charm!
I found that you have to use a very light touch on Safari mini-tablet (or phone), and the slider works. If you press down too hard, Safari Mobile (or tablet), tries to bring up the "select/select all" pop-up bubble, as if it were a text field. Also, Safari on my tablet or phone thought that I wanted to "move the window around" - I have not found a solution to these issues yet. However, I did get the slider to work in Safari with a "light finger touch".
I found the following resources to be helpful:
Pen by Aron Woost:
https://codepen.io/aronwoost/pen/nlyrf
Here is a sample of Woost's code:
input[type="range"] {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
width: 100%;
height: 20px;
margin: 0;
border: none;
padding: 1px 2px;
border-radius: 14px;
background: #232528;
box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
-webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
outline: none; /* no focus outline */
}
Daniel Stern:
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
You can do a google search on " How to style range sliders in Webkit
By Sara Vieira" and find her article.
I hope this helps.
An easy and quick SOLUTION!
The input range slider can be made User-Friendly on a mobile device by removing the troublesome highlight effect on the slider when tapped upon.
The Fix - Add the CSS property, -webkit-tap-highlight-color: transparent to the CSS of the element or the complete html page. This will remove the highlight effect on an element when it is tapped on a mobile device.
Related
I have an HTML element textarea with defined CSS rule { resize: both }. In FF when the user mouse over the right bottom corner of textarea the cursor changed according to value of property resize, but in Chrome cursor doesn't change.
Please open this example in FF and Chrome to check the difference.
Is it a bug of Google Chrome and can I fix it with CSS on my side?
Update
I reported bug to Chromium:
https://bugs.chromium.org/p/chromium/issues/detail?id=942017
Update 2
The bug was fixed in Chrome 80.
Actually, there are, or at least were ways in which you could style the resizer and add cursor: se-resize; on hover. Check out this post: Can I style the resize grabber of textarea?
It describes how you can use ::-webkit-resizer to style the resizer:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
Unfortunately it stopped working in Chrome and I couldn't anything similar. (I think it still works in Safari).
But fear not, it's not hard to make a custom handle. Actually, I would encourage you to use a custom one as the default one is too small and hard to hit. Especially with touch. There are actually a lot of sites that use custom handles (or at least automatic resizers based which grows based on the content. Works great on touch too!).
Ie. Stackoverflow uses a custom handle (TextAreaResizer):
GIF of Stackoverflows resize handle
There are also lots of libraries for exactly that purpose, just do a Google search, and you'll find something that works for you :)
This is rendered by browser itself cant be designed using css
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;
}
Wondering if anyone can help with an IE8 issue, I've searched high and low and tried many different things. On a WordPress site for a client, an input text box appears much smaller than it should, and off to the side of the page, as compared with all other browsers I've tested.
You can see a grab of how the page looks on IE8 (on Windows 7) here:
http://perfectitaliano3.fonterra.safecom.com.au/wp-content/uploads/grab2.jpg
If you compare that to the page http://perfectitaliano3.fonterra.safecom.com.au/recipe/potato-rosemary-and-speck-pizza/ in a modern browser you’ll see the width and placement of the search box and filter dropdown menu at the top right is all messed up.
I'm a bit a noob at IE8 issues, but I’ve tried changing the css, patching it with modern.js, html5 shiv, modernizr, all sorts of things, but nothing makes any difference!
If you have any suggestions please let me know, thanks.
Try this
#top #s{
height: 40px;
padding: 0px 47px 0px 5px;
}
Thanks so much for answering #Jenti. I tried your suggestion but it didn't seem to work, although because it's now live I tried it in the developer tools in a virtual machine version of IE8, so one can never be sure ;)
However I've since found a solution, I added the following:
#searchform > div {
width: 500px;
}
#s {
display: table-cell !important;
}
and that seemed to do it. Thanks again and appreciate it.
I have a html page, in which i have given background using CSS background-image property
I am able to view background in all major browsers(Firefox, IE, Chrome,Safari) of windows but when i run same page in MAc osx browser(safari or chrome), background is not visible, rest all CSS is working good
My CSS is
border-top: 5px solid #00bdb3;
margin: 10px 0 0 0 ;
background-image:url('/Images/back.jpg');
background-repeat:repeat-x;
where is the problem, i am not able to find
i have tried to give inline styling also but results were same, i was still not able to see background in Mac Browsers
i solved it by changing the CSS
background-image:url('/Images/back.jpg');
to
background-image:url('../Images/back.jpg');
Just try to validate your css Just like #Chris Hardie..
If it doesnt meet your need please read this solution.
Hope it helps !!
I find myself seeing things like buttons, inputs, header, ect. and wanting the code so I can reference off them and make my elementary designs look better. I always try to change it up a bit, I don't like stealing other peoples designs.
Viewing the page source from just the browser is very sloppy and usually hard to read. I tried using Firebug but I noticed one huge problem. It doesn't show all the CSS.
Example
Firebug will only show:
box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
When the full code is:
box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
-webkit-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
-moz-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
If leaves out the moz and webkit.
I can speak with experience in the Chrome Inspect tool, when debugging the page elements the browser automatically ignores and does not show the invalid properties or styles, but if you look at the actual page source code (or the css) your styles will be there.
I think that if Firebug does not show those styles it means Firefox is ignoring them, in this case you are using the -moz-box-shadow but Firefox uses box-shadow to render the element.
download the latest version of any browser and you see absolutely all the css.
With Inspector in Chrome you can see even the different states like :hover :active and so on
Why not just use the inspect element that's built in to Chrome? I use it every day of my life and love it.
I also use "stylebot" to show me some styles of websites, but I only use that to style websites (clientside) that I feel need a bit of fixing, like making buttons bigger, etc.