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?
Related
I have a search field at the top of my site that when your selected it jumps up abit out of position and when you click out of the box so it's not selected but not close it the search field is aligned correctly. I can't figure out what is going on to make it move while the cursor is in the input field.
https://www.argentscientific.com
Click the link then click the search icon on the right side of the top level menu and you will see the problem. Rather confused about this one.
This is because of :focus is not being included. When you select the search input, :focus is triggered but there is an existing css that overwrite your css, to fix this you need to explicitly include :focus into your css to prevent it being overwritten. Try changing below css from
.aws-container .aws-search-field{
width: 100%;
color: #313131;
padding: 6px;
line-height: 30px;
display: block;
font-size: 12px;
position: relative;
z-index: 2;
background: rgb(247, 247, 247);
-webkit-appearance: none;
}
to
.aws-container .aws-search-field, .aws-container .aws-search-field:focus {
width: 100%;
color: #313131;
padding: 6px;
line-height: 30px;
display: block;
font-size: 12px;
position: relative;
z-index: 2;
background: rgb(247, 247, 247);
-webkit-appearance: none;
}
I have a issue on IE 9. I use the attribute:
border: 2px solid #ffffff;
but on IE 9 it does not show properly. Another browser (Chrome, FF) is OK.
Why does the shadow appear on IE 9 ?? This is demo http://jsfiddle.net/rdqm4wns/. Please, run it on IE9
This is a rendering bug causing leakage of the radius into the border width.
Add this rule will resolve it: background-clip: padding-box;
.btn-radius {
border: 2px solid #ffffff;
background: #444444;
width: 25px;
height: 25px;
border-radius: 6px;
text-align: center;
position: relative;
background-clip: padding-box;
}
I created a modal dialog using CSS3, it works perfectly. But my site is responsive and the modal has to appear on several items inside an iframe (see here: http://labs.tageswoche.ch/interaktives/filmPortraits/ and here: http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm). In the iframe it doesnt work, but it works as expected on the real site.
The modal dialog is implemented on the first two pictures.
And here the code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
Here is a jsfiddle I used to implement the modal dialog:
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
What i want to achieve is that the modal appears where the mouse click was (or more or less) so that also on mobile devices on the last images of the wall. Right now the modal appears on top. How can I implement this? I have no clue.
One thing I'd like to say about your design is, do not make separate modal window htmls for each person's modal, use one modal and change its innerhtml as you click on different people so you write less code, easier to maintain (if you add changes to your modal, you do one change in one location etc)
Also, the nature of modal windows is, it has a semi transparency background, with the modal window floating (not in css context) in the middle of it.
If you see this css bit below you'll understand better:
.modalDialog > div {
width: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
The bit that says "margin: 5% auto;" causes this behaviour, what you need to do is change this to the same notation the padding is set and for each position of the image, give it certain values, ie margin: 10px 10px for a modal window that just shows at the top left corner of the window etc if you're not too fussy about exact mouse location.
If you are, than use "onclick" event of your outermost background div with width/height equal to the overall size of every person's image included, than use the event object to get mouse location values (read this link http://www.w3schools.com/jsref/event_clientx.asp)
I didn't write it for you so that you can do it yourself and learn, hope this helps!
I have a website (daccaa.com) and on my iPad or iPhone I have to click the Text Box twice rather than once to select it.
This is the code:
.box {
width: 62%;
font-size: 20px;
padding: 9px;
font-family: 'Lato', sans-serif;
margin-top: 9px;
resize: none;
outline: none;
font-weight: 300;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.box:hover {
width: 62%;
font-size: 20px;
padding: 9px;
font-family: 'Lato', sans-serif;
margin-top: 9px;
border: solid 1px #FFFB00;
outline: none;
}
.box:focus {
width: 62%;
font-size: 20px;
padding: 9px;
font-family: 'Lato', sans-serif;
margin-top: 9px;
border: solid 1px #FFD900;
outline: none;
}
This is the CSS code for the textbox, I wondered if there is any javascript or jquery or even CSS that can be used to stop you from needing to click the textbox twice. I do not want to remove the hover and focus though.
You will need to use a media query to remove the hover when on mobile devices. The reason for this is that on the iPhone (possibly other phones as well), when you click on an element that has hover, that first click will only fire the hover action. The second will give focus to the element.
In your case, if you want to keep the hover for desktop visitors, you would want to use a media query to limit the hover to desktops (and not mobile devices).
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.