I have been working a mobile version of my site. All seems to work perfectly fine on opera mobile and chrome mobile, until I checked my page in Firefox mobile. Firefox zooms in my page that it looks awful. I don't know if it's CSS issue or this is how Firefox mobile renders pages. I've checked some other mobile version of famous sites and it worked perfectly fine on firefox. I badly need help with this one. Screenshot below:
Chrome
Firefox
categories is the select input
searchinput is the text input
CSS code:
#categories{
width: 95%;
padding: 50px;
font-size: 110%;
outline: 0;
color: #777;
-webkit-appearance: none;
-moz-appearance: none;
border: solid 5px #cacaca;
border-radius: 20px;
margin: 30px 0 10px 0;
background-color: #fff;
background-image: url(http://baligia.com/img/selectdown.png);
background-position: 96% 50%;
background-repeat: no-repeat;
background-size: 50px;
-moz-appearance: none;
}
#searchinput{
border: solid 5px #cacaca;
border-radius: 20px;
background: #fff;
color: #42454e;
padding: 6px 8px;
width: 95%;
outline: none;
font-size: 110%;
text-align: left;
padding: 50px 130px 50px 50px;
margin: 0 0 30px 0;
}
Try
#categories, #searchinput {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Related
Per the code snippet below, I am trying to create a tool tray with vertical sliders, styled like procreates ui.
When I rotate the tray 90 degrees using transforms to get everything vertical, the sliders break on mobile (any touch device), I can click them to position but pressing and sliding breaks. If I remove the rotate class, all works fine.
Tested on a wacom touch screen monitor, ipad pro and samsung z fold 3, all touch devices the slider is broken on though works as expected with mouse. Pen devices seem to also break, unable to move the sliders smoothly.
Any help fixing this or a better approach would be greatly welcome, trying to get this to work without javascript
/* Desperate to remove focus outline in firefox */
::-moz-focus-inner {
outline:0;
}
:focus {
outline:0;
}
.topcoat-range-input--vertical {
position: relative;
/*padding: 0;
margin: 0;*/
border: none;
box-sizing: border-box;
background-clip: padding-box;
vertical-align: top;
outline: none;
-webkit-appearance: none;
border-radius: 4px;
border: 1px solid #a5a8a8;
background: #CCd3d7d7;
height: 2rem;
border-radius: 4px;
}
.topcoat-range-input--vertical::-webkit-slider-thumb{
cursor: pointer;
-webkit-appearance: none;
}
.topcoat-range-input--vertical::-moz-range-thumb {
cursor: pointer;
}
/*.topcoat-range-input--vertical {
border-radius: 4px;
border: 1px solid #a5a8a8;
background: #d3d7d7;
height: 2rem;
border-radius: 4px;
}*/
.topcoat-range-input--vertical::-webkit-slider-thumb {
height: 2rem;
width: 1.2rem;
border: 1px solid rgba(0,0,0,0.36);
border-radius: 6px;
background: #e5e9e8;
background-size: 7px 18px;
box-shadow: inset 0 1px white;
}
.topcoat-range-input--vertical::-moz-range-thumb {
height: 2rem;
width: 1.2rem;
border: 1px solid rgba(0,0,0,0.36);
border-radius: 6px;
background: #e5e9e8;
background-size: 7px 18px;
box-shadow: inset 0 1px white;
}
::-ms-tooltip,
::-ms-fill-lower {
display: none;
}
.topcoat-range-input--vertical {
/*display: block;
box-sizing: border-box;*/
vertical-align: middle;
}
#tool-setting-palette{
background: #000000;
opacity: 0.8;
height: fit-content;
width: fit-content;
padding: .3em;
border-radius: 0.5em;
position: fixed;
left: 2em;
bottom: 0;
}
.btn {
background-color: transparent;
width: 1.5em;
height: 1.5em;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
vertical-align: middle;
}
/* Darker background on mouse-over */
.btn:hover {
color: RoyalBlue;
}
.btn:active {
color: Blue;
transform-origin: center;
transform:scale(0.9);
}
.rotate-rev-90{
transform-origin: center left;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.rotate-90, .rotate-90 .btn:hover, .rotate-90 .btn:active{
transform-origin: center;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
<div id="tool-setting-palette" class="rotate-rev-90">
<button id="redo-btn" type="button" value="" class="btn rotate-90"><i class="fa fa-repeat"></i></button>
<button id="undo-btn" type="button" value="" class="btn rotate-90"><i class="fa fa-undo"></i></button>
<input type='range' class='topcoat-range-input--vertical'>
<input type='range' class='topcoat-range-input--vertical'>
</div>
https://codepen.io/taibhse-designs/pen/zYLxvOj
I have the following vertical range slider setup.
Codepen LINK
Example here:
body{
display: flex;
justify-content:space-evenly;
align-items:center;
align-content:start;
flex-wrap:wrap;
width: 100%;
height: 100vh;
overflow:hidden;
}
:root{
--shader_top_half_color: cornflowerblue;
--shader_thumb_color: #5e7cd3;
--group_shader_top_half_color: #4bcca1;
--group_shader_thumb_color: #4cbb9f;
}
.shaderRangeWrapper {
width: 100px;
display: flex;
flex-direction: column;
gap: 45px;
justify-content: center;
align-items: center;
margin-top: 35px;
-webkit-tap-highlight-color: transparent;
position: relative;
}
input.shaderRange {
-webkit-tap-highlight-color: transparent;
transform: rotate(90deg);
height: 100px;
width: 150px !important;
margin: 0px;
padding: 0px;
-webkit-appearance: none;
background: transparent;
touch-action: none;
overflow: hidden;
border-radius: 0.5rem;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
/* REMOVE BASIC STYLES */
.shaderRange::-webkit-slider-thumb {
-webkit-appearance: none;
}
.shaderRange:focus {
outline: none;
}
.shaderRange::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
/* STYLE THE THUMB FOR SPECIFIC BROWSERS */
/* Special styling for WebKit/Blink */
.shaderRange::-webkit-slider-thumb {
-webkit-appearance: none;
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--shader_top_half_color);
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
/* All the same stuff for Firefox */
.shaderRange::-moz-range-thumb {
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--shader_top_half_color);
}
/* All the same stuff for IE */
.shaderRange::-ms-thumb {
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--shader_top_half_color);
}
/* STYLE THE TRACK FOR SPECIFIC BROWSERS */
.shaderRange::-webkit-slider-runnable-track {
height: 100px;
height: 100px;
cursor: pointer;
background: transparent;
border-radius: 0.3rem;
}
.shaderRange:focus::-webkit-slider-runnable-track {
background: transparent;
}
.shaderRange::-moz-range-track {
height: 100px;
height: 100px;
cursor: pointer;
background: transparent;
border-radius: 0.3rem;
}
.shaderRange::-ms-track {
height: 100px;
height: 100px;
cursor: pointer;
background: transparent;
border-radius: 0.3rem;
}
/* GROUP SHADER STYLE */
/* Special styling for WebKit/Blink */
.shaderRange.groupShaderRange::-webkit-slider-thumb {
-webkit-appearance: none;
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--group_shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--group_shader_top_half_color);
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
/* All the same stuff for Firefox */
.shaderRange.groupShaderRange::-moz-range-thumb {
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--group_shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--group_shader_top_half_color);
}
/* All the same stuff for IE */
.shaderRange.groupShaderRange::-ms-thumb {
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--group_shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--group_shader_top_half_color);
}
<div class="shaderRangeWrapper">
<input type="range" min="0" max="100" class="shaderRange">
<span class="shaderRangeName">Test 1</span>
</div>
On Android and Windows, i can click/tap anywhere on the slider and the thumb will follow my finger/cursor from where i clicked/tapped and it will not trigger a change until i release it. On IOS ( tested on Iphone 7 plus, 8 and X ) i can only slide the range if i manage to hit the thumb. If i miss tap and did not hit the slider's thumb, the slider will trigger a change and the thumb will not follow my tapping. How can i make this consistent on platforms?
HERE IS A DRIVE LINK To A VIDEO DEMONSTRATING THE GOOD BEHAVIOUR ON ANDROID AND THE BAD ON IOS
EDIT: The bad behaviour description was wrong. On IOS if i miss the thumb, it will not trigger a change, but the thumb will not follow my finger and i don't know where it is. Often times it does not change the range at all if i release it.
I have this piece of CSS code that appears on all other browsers that I have tested including Firefox and Chrome but for some reason, they do not appear in the Safari browser. What am I doing wrong?
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=number], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button] {
width: 45%;
background-color: #3a5cd7;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
div {
padding: 70px 0;
text-align: center;
}
It seems that you have to use another version of your code for safari or firefox.
Example for type=number in firefox :
input[type=number] {
}
Example for type=number in safari :
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
}
I find this here:
Numeric Inputs – A Comparison of Browser Defaults
You just have to look for the rest of the inputs
i have written css for dropdown and i have applied background color on it. its working fine on IE 7,8,9,10 , Chrome, FF , safari (window). but in mac system its not showing background color.
in mac its applying white background.
this is my website url http://www.earlylearninghq.org.uk/ and have look on dropdown beside search box.
this my css code
#media screen and (-webkit-min-device-pixel-ratio:0) {
.selecter .selecter-selected {
background-color: #80B83B;
background: url(http://www.earlylearninghq.org.uk/wp-content/themes/10eight/Search-bar-Arrow.png) no-repeat right 3px center;
color: #fff;
cursor: pointer;
display: block;
font-size: 13px;
margin: 0;
overflow: hidden;
padding: 6px 24px 4px 9px;
position: relative;
text-overflow: clip;
z-index: 2;
width: 64px;
margin-top : -27px;
}
}
can anyone help me?
Just remove background property from your class. Looks like it is applying two times.
#media screen and (-webkit-min-device-pixel-ratio:0) {
.selecter .selecter-selected {
background-color: #80B83B;
/*background: url(http://www.earlylearninghq.org.uk/wp-content/themes/10eight/Search-bar-Arrow.png) no-repeat right 3px center;*/
color: #fff;
cursor: pointer;
display: block;
font-size: 13px;
margin: 0;
overflow: hidden;
padding: 6px 24px 4px 9px;
position: relative;
text-overflow: clip;
z-index: 2;
width: 64px;
margin-top : -27px;
}
}
I am implementing a search box for a html-javascript based app using Chrome:
fiddle
it should look like this:
but when I deploy app on iphone,
screen looks like this:
I know it's difference with webkit, I thought using safari to debug it would be a solution, however,when I use safari to open it, it looks like this:
Just don't know why on iPhone, it looks like that. How to improve it to the feature which I need?
Here is the html:
<div class="form-wrapper">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</div>
CSS:
.form-wrapper {
height: 80px;
background: #555;
color: #FFF;
clear: both;
}
.form-wrapper input {
background-color: #FFF;
-moz-box-sizing: border-box;
border-radius: 10px;
border: 5px solid #E5E4E2;
margin: 2px;
height: 40px;
vertical-align: middle;
padding: 20px;
margin-top: 15px;
width: 85%;
}
.form-wrapper button {
overflow: visible;
position: absolute;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
color: #FFF;
text-transform: uppercase;
background: red;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: 20px -116px;
}
.form-wrapper button:before {
content:'';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent red transparent;
top: 12px;
left: -6px;
}
type="search" causes the field to have a -webkit-appearance: searchfield on Safari, which causes lots of your styles to be ignored.
Have either a none appearance or textfield appearance.
Here is a fiddle with none, which seems to work for me on Safari 6/OSX (no iDevice available to test).