Develop Reference

How can I hide input blue caret in the ios webview?

There is a custom react component for some sms code.
This component made of one simple input which overlayed on a styled view block (divs with borders and numbers)
input styles
width: 252px;
height: 52px;
line-height: 28px;
box-sizing: initial;
border: 0;
font-family: 'MTS';
background: transparent;
position: absolute;
color: transparent;
-webkit-text-fill-color: transparent;
z-index: 2;
font-size: 50px;
letter-spacing: 18px;
caret-color: rgba(255, 255, 255, 0);
outline: none;
In the code styles above, native blue caret of input is hidden, however on ios webview 6,7,8 and xr iphones, blue caret still exist
(on Android and all browsers everything is okay including safari)
How could I hide it at all?

Dashed outline with outline-offset not working in IE

i have to add dashed outline on focus at a specific offset of 4px, this is working fine in all browsers except IE since it doesn't support outline-offset and i cannot add a wrapper element in the HTML as work around with padding because i am trying to make a generic fix across the application, and i cannot add a border: 4px solid transparent, because the elements have a border which is required, and Pseudo elements will not work because we have a pseudo class of focus and we cannot use box-shadow as it doesn't allow a dashed outline
this is what i want to achieve in IE.
Css which is working fine on chrome
.keyBoardUser input[type="radio"]:focus + div {
//border: 4px solid transparent // cannot use this
outline-offset: 4px;
outline: 1px dashed black;
}
keyboard user is a class which is added on tabbing using JS.

Please refer to this thread, use CSS pseudo elements or nested div to set the border property, and use it as a alternative method.
Sample code as below:
<style>
.keyBoardUser {
margin-left:20px;
text-align: center;
width:30px;
}
input[type="radio"]{
width:20px;
height:20px;
}
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.keyBoardUser input[type="radio"]:focus + div {
outline-offset: 6px;
outline: 2px dashed black;
}
}
/*Microsft Edge browser*/
#supports (-ms-ime-align:auto) {
.keyBoardUser input[type="radio"]:focus + div {
outline-offset: 6px;
outline: 2px dashed black;
}
}
/*IE Browser*/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.box {
position: relative;
text-align: center;
}
.keyBoardUser input[type="radio"]:focus + div:after {
content: "";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 40px;
height: 40px;
border: 2px dashed red;
}
.box input[type="radio"] {
margin-left: 5px;
margin-top: 5px;
}
}
</style>
Html code as below:
<div class="keyBoardUser ">
<input id="Radio1" type="radio" />
<div class="box"><input id="Radio1" type="radio" checked="checked" /></div>
</div>
The output like this:
IE browser:
Chrome browser:

Use a pseudo element on the sibling element to style the dashed outline. I am calculating the width and height dynamically.
Use the below class. This works on IE as well!
.keyBoardUser input[type="radio"]:focus + div::after {
content: "";
position: absolute;
display: block;
border: 4px solid transparent;
outline: 1px dashed #000;
width: calc(100% + 10px);
height: calc(100% + 10px);
top: -5px;
left: -5px;
}

jQuery - Set style of object with '::' in name

I am customising the look of an input-range and the slider object which I have done successfully with this CSS:
input[type="range"] {
-webkit-appearance: none !important;
background: rgba(1,1,1,0.3);
height:6px;
border: solid 1px #000;
border-bottom: solid 1px #1d1d1d;
border-radius: 6px;
width: 48px;
margin: 0;
margin-bottom: 4px;
display: block;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: -webkit-linear-gradient(top, #a2a2a2 0%,#8b8b8b 50%,#7b7b7b 100%);
height:10px;
width:10px;
box-shadow: inset 0 1px 0 #C4C4C4;
border-radius: 10px;
}
This code works 100%, however what I want to do I be able to change the background color of the slider (input[type="range"]::-webkit-slider-thumb) with jQuery.
I've been able to change the border of the main box with:
$('input#volume').css('background', '#FFFFFF');
But I can't figure out how to get the slider with jQuery.
Thanks
(FYI I am only targeting Safari (WebKit) on a Mac hence the lack of other browser support, its for an application)

Apply background-image for dropdown is not working on IE

Applied Background image for a Drop-down it works fine in FF and other modern browser but not in IE(all version)
here is my code:
div.timeslots select {
background: url("./images/imag1e.png") no-repeat scroll 0 -48px transparent;
border: 0 none;
color: #999999;
font-size: 12px;
height: 30px;
padding: 6px;
width: 242px;
}
can anyone help me to fix this issues

There is no fix. It is not supported.

jquery animate removes scroll in div for IE

Right now I'm getting this strange problem where when I use jQuery's animate() function on a <div> it removes the ability to scroll. I'm adjusting the height with animate(). This problem only comes up with IE and works fine with Chrome and FF.
Below is my css class for my div
div.fullscroll{
height: 65%;
width: 75%;
overflow-x: hidden;
overflow-y: scroll;
border-top: 1px solid #347235;
border-bottom: 2px solid #347235;
border-right: 2px solid #347235;
border-left: 2px solid #347235;
-moz-border-radius-topleft: .1em;
-moz-border-radius-topright: .1em;
-moz-border-radius-bottomright: .2em;
-moz-border-radius-bottomleft: .2em;
border-top-left-radius: .1em;
border-top-right-radius: .1em;
border-bottom-right-radius: .2em;
border-bottom-left-radius: .2em;
background-color: #FFF;
padding: 0px;
margin: 0px auto;
position:relative;
}
Here is my JS Jquery animate where <div id='main'>
$('#main').animate({
height: "40%"
}
,"slow");
After the animate is finished the <div> tag no longer has the ability to scroll. I'm completely stumped on this and was wondering if anybody had an idea.
(Once again this only happens in IE)

I'm guessing that this might be IE's problem with setting percentage heights (ref). Try changing the height to a pixel value and see it if works.
Also, is #main and .fullscroll the same div?

I was able to fix this using a quick workaround. After the animation is finished I add the overflow property back to the element.
like
$('#main').animate({
height: "40%"
},function(){
$('#main').css('overflow-y','scroll');
}
);