I've given to buttons a custom css. It works great on:
Windows Desktop (Chrome, Opera, Edge)
Windows Desktop through console mobile device demo
Android (Opera, Chrome)
iOS (Safari, Chrome)
The problem is that on iPad it doesn't work.
The css is this:
input[type="button"],
button,
.theater-control-button {
-webkit-appearance: none; /*Safari/Chrome*/
-moz-appearance: none; /*Firefox*/
-ms-appearance: none; /*IE*/
-o-appearance: none; /*Opera*/
-webkit-border-radius: 0;
}
On iPad it looks height: 15px and with border radius: 30px.
You should try changing your
<button type="button">
to
<button type="submit">
in your HTML
and, of course, in your CSS
input[type="submit"],
button,
.theater-control-button {
-webkit-appearance: none; /*Safari/Chrome*/
-moz-appearance: none; /*Firefox*/
-ms-appearance: none; /*IE*/
-o-appearance: none; /*Opera*/
-webkit-border-radius: 0;
}
This solved once same issue for me on iPad, hope it helps.
Related
So first of all, thank you for reading and helping me out.
I've spent the last 4 hours on the web searching for a solution for my strange problem.
Problem
I create a <div> with (click) action. Style it with CSS classes, :hover, :active and :focus. When I click it with mouse, everything is good. But when I touch it with a touchscreen, a oddly gray overlay appears (see the linked GIFs)!!
Behaviour when mouse-clicked
Behaviour when touched
Here is a snippet like my code:
#btn-container {
margin: 5px;
text-decoration: none;
cursor: pointer;
float: left;
border-radius: 25px;
border: none;
transition: 0.3s;
background-color: rgb(230,230,230);
color: black;
}
#btn-container:hover {
background-color: rgb( 200,200,200 );
}
#btn-container:active {
background-color: rgb( 150,150,150 );
transition: 0s;
}
#btn-container:focus {
outline: 0;
}
.standard-btn {
padding: 12px 20px;
display: inline-block;
}
html {
/* Prevent user to select text */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer, Edge */
user-select: none; /* Non prefixed version: Chrome, Opera */
}
<div id="btn-container" class="standard-btn">Touch me</div>
PS: I'm developing in Angular. I've tested this strange behaviour on Chrome for Android, Safari on iOS, Chrome, Edge, IE on Windows.
The oddity is that, for example, on JSFiddle (here) or here on StackOverflow this doesn't happen. And it doesn't happen also on another Angular app of mine.... and I wasn't able to find out WHY, CSS/HTML/JS are exactly the same between the two apps. That's crazy.
Ok, solved. I'll post here the solution for future reference.
I just needed to add the property -webkit-tap-highlight-color: transparent on the main button class. As it is here described, this is not a standard property. But it worked!
Referencing to the code snippet from the question, I've modified the #btn-container class, in this way:
#btn-container {
margin: 5px;
text-decoration: none;
cursor: pointer;
float: left;
border-radius: 25px;
border: none;
transition: 0.3s;
background-color: rgb(230,230,230);
color: black;
-webkit-tap-highlight-color: transparent; /* <-- this is new */
}
I have the following html:
a {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
border-radius: 5px;
padding: 2px;
box-shadow: 2px 2px grey;
}
<div id="github">
Github repos
</div>
This works in Chrome. In Safari 11.1.2 it does display as a button, but border-radius and box-shadow have no effect.
Try to remove these lines:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
And recreate the button style using CSS. You'll mainly need a border, a box-shadow and a gradient background.
The appearance is conflicting with the button appearance. I had the same issue while trying to style a dropdown for iOS. It was impossible, until I recreated it using CSS.
I have a custom check box, that should be fine across all browsers, however I am having problems with IE, EDGE and FireFox
FireFox, Edge and IE
Problem is the tick is black and square check box
Dose anyone know why, as I thought this code was cross browser compatible.
.regular-checkbox {
display: inline-block;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 18px;
/* Firefox 1-3.6 */
-moz-border-radius: 18px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 18px;
width: 38px;
height: 38px;
border: 1px solid #ccc;
background-color: white !important;
}
.regular-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.regular-checkbox:checked:after {
content: '\2714';
position: absolute;
color: green;
font-size: 37px;
top: 0;
}
<input type='checkbox' class='regular-checkbox' checked />
Well it's not cross browser compatible. -webkit-appearance and -moz-appearance are not standard and should not be used, also they behave differently in different browsers.
My suggestion is to use combination of input and label, where you will hide checkbox input and use background images for checkbox. Also be sure not to hide input with display:none because of accessibility.
Example: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms
I'm doing an image replace for my radios, it works local in IE(just opening the html page), on WAMP in IE and also on my Linux server online in IE but will not work on my in-house IIS 7 server. Works in Chrome on the IIS server but not IE.
HTML
<input id='Good' type='radio' class='css-checkbox'name='value' value='1'/>
<label id='1' class='css-label' for='Good'> Good </label>
CSS
input[type=radio].css-checkbox {
margin: 10px;
display:none;
}
input[type=radio].css-checkbox + label.css-label {
padding-left:27px;
height:22px;
display:inline-block;
line-height:22px;
background-repeat:no-repeat;
background-position: 0 0 !important;
vertical-align:middle;
cursor:pointer;
}
label.css-label {
margin: 10px;
background-image:url(../images/radio.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type=radio].css-checkbox:checked + label.css-label{
background-position: 0 -22px !important;
}
So it was a compatibility view issue. I went into "compatibility view settings" and unchecked "show intranet in compatibility view". Works fine now.
I would like to know if there is anything equivalent to: -webkit-appearance: none; for Firefox?
What I want to achieve:
<select ...>
<option>...</option>
<more option>
</select>
The -moz-appearance CSS property is
used in Gecko (Firefox) to display an
element using a platform-native
styling based on the operating
system's theme.
Source:
Mozilla
-moz-appearance:none with <select> still shows a dropdown arrow on Firefox.
See this bug report for more information: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
https://developer.mozilla.org/en/CSS/-moz-appearance
Try this.. It works
select{
-moz-appearance: none;
text-overflow: '';
text-indent: 0.1px;
}
Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.
Live example: http://jsfiddle.net/gaurangkathiriya/z3JTh/
If you want a select looking like a button in Firefox, use:
select { -moz-appearance: button; }
Like here: http://jsfiddle.net/SsTHA/
Try this...for me it's working on Firefox:
select {
padding: 0px 0px 0px 5px;
border-radius: 0px;
webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-appearance: none;
background: #ffffff url(../images/small-arrow-down.png) 62px 7px no-repeat;
padding: 1px 20px 1px 3px;
cursor: pointer;
border-radius: 2px;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Here is the code for Firefox, Chrome, Safari, and Internet Explorer (Internet Explorer 10 and up).
Just add a small down arrow PNG image for your select and it's all set.
My arrow is 30x30, but set it to your specifications.
.yourClass select{
overflow: none;
background-color: #ffffff;
-webkit-appearance: none;
background-image: url(../images/icons/downArrow.png);
background-repeat: no-repeat;
background-position: right;
cursor: pointer;
}
/* Fall back for Internet Explorer 10 and later */
.yourClass select::-ms-expand {
display: none;
}