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
Related
This question already has answers here:
Removing the clear and reveal password icons from Internet Explorer
(3 answers)
Closed 1 year ago.
I now found an answer:
It just works when I add display: none !important;. I dont know, what exactly is blocking the display: none; but if someone else has this error, try to add !important and check that the input is an password field.
Original Question:
I have a password input with a custom added "show password" button. Now I want to remove the password button which is added by MS Edge and IE.
I already tried:
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none;
}
and
input::-ms-reveal,
input::-ms-clear {
display: none;
}
The ::ms-clear is working and removes the little x where the user can clear the input. But the ::ms-reveal isn't working. Tested in IE 11, MS Edge based on Chromium and newest MS Edge which isn't based on Chromium.
MS Edge, Chromium based,
IE 11
The eye on the right is my custom added eye, the other one is the eye added by IE or Edge.
Here is my input styling:
/*
BASIC INPUT STYLING
*/
input, textarea, select {
outline: none;
border-radius: 6px;
box-sizing: border-box;
box-shadow: none;
font-family: 'Roboto', sans-serif;
font-weight: 300;
line-height: 1;
font-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
color: #222222;
background-color: transparent;
border: 1px solid #CCCCCC;
padding: 18px 22.5px;
transition: border-color .15s ease-in-out;
width: 100%;
}
input:focus, textarea:focus, select:focus {
border: 1px solid #999999;
}
.input-small input, .input-small select, .input-small textarea {
font-size: 14px;
padding: 9px 11.25px;
}
/*
INPUT WITH ICON STYLING
*/
.input-with-icon {
position: relative;
}
.input-with-icon input, .input-with-icon select {
padding-right: 62.5px;
}
.input-with-icon.input-small input, .input-with-icon.input-small select {
padding-right: 32px;
}
.input-icon-div {
height: 51px;
border-radius: 6px;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
position: absolute;
right: 5px;
bottom: 2px;
cursor: pointer;
}
.input-small .input-icon-div {
font-size: 14px;
height: 27px;
width: 25px;
}
and the HTML:
<div class="input-with-icon">
<input type="password" name="password" id="password" class="" maxlength="255">
<div class="input-icon-div">
<i class="far fa-eye"></i>
</div>
</div>
I tried to test both of your code snippets on the IE 11, MS Edge legacy browser, MS Edge Chromium browser and Firefox.
It worked on my side and it is not showing the Reveal password button (Eye).
Tested code:
<!DOCTYPE html>
<html>
<head>
<style>
input::-ms-reveal,
input::-ms-clear {
display: none;
}
</style>
</head>
<body>
Password: <input type="password" value="" id="myInput" /><br /><br />
</body>
</html>
Output in IE 11 browser:
Output in MS Edge legacy browser:
Output in MS Edge Chromium browser:
I checked the documentation and found this information.
Non-standard:
This feature is non-standard and is not on a standards
track. Do not use it on production sites facing the Web: it will not
work for every user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
Browser compatibility only shows the IE 10 version.
It still shows in Edge as of version 92 when once you type something in the field. According to Edge docs, the solution is
::-ms-reveal {
display: none;
}
They also show ways to customize the button
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 */
}
Using the below CSS, I have managed to get the placeholder font size to be similar for all common android browsers, but iphone's browser makes the placeholder font so tiny it's barely readable. If I increase the size so that it is readable, it becomes so huge on all other android browsers that it won't even fit in the form boxes (and looks ridiculous as it is larger than even the header font).
Is there a workaround to change the font size for just safari browsers? This massive disparity in font size is absurd, and I can't even find a compromise between the two where both are readable. cbtemail.com is the site if you want to see it.
input {
margin-bottom: 20px;
background-color: #CCC;
color: #000;
height: 60px;
font-size:28px
}
textarea {
background-color: #ccc;
width:100%;
margin-bottom: 20px;
height: 90px;
font-size:12px
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #555;
opacity: 1; /* Firefox */
font-size: 28px;
}
::-webkit-input-placeholder {
font-size: 18px;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #555;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #555;
}
:-moz-placeholder {
font-size: 28px;
}
::-moz-placeholder {
font-size: 28px;
}
I'm using the following code to customize my select dropdown arrow:
HTML:
<span class="selectWrapper">
<select id="rowselect" class="pageinfoselect input-mini">
<option>...</option>
</select>
</span>
CSS:
span.selectWrapper {
position: relative;
display: inline-block;
width:65px;
}
span.selectWrapper select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #f5f5f5;
height:30px;
color:#666666;
border:1px solid #dddddd;
}
/* Select arrow styling */
span.selectWrapper:after {
content: url("../images/arrow_down.png");
position: absolute;
top: 0;
right: 0;
bottom: 0;
line-height: 30px;
padding: 0 7px;
background: #f5f5f5;
color: white;
border:1px solid #dddddd;
border-left:0px;
}
This works fine and replaces the default dropdown arrow but the problem is that the arrow image is not clickable. If I click on the select box it opens but I want it to open when I click the arrow image as well
Add the following rule
pointer-events:none;
EDIT:
It should be noted though that IE doesn't yet support this property (Although according to caniuse - It will be supported in IE11)
BUT, If you still want to this method you can use Modernizer or conditional comments (For IE < 10) and this css hack (for IE10) to make IE revert to the standard built in arrow.
/*target Internet Explorer 9 and Internet Explorer 10:*/
#media screen and (min-width:0\0) {
span.selectWrapper:after
{
display:none;
}
}
There is however a workaround (and also a different solution) for this, which I mention in my answer here - which also contains this Codepen
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;
}