Website: http://clandestinoangusto.it/
Hi, can anybody explain why WebKit browsers are not able to highlight selected texts in the above given website? Its working fine with IE and FF,But chrome and safari just showing the highlight cursor, but not able to select text.
Probably it's something about CSS, but I can't fix it at all.
Thankyou.
Remove this from body style
-webkit-user-select:none;
I know this has been answered, but the following code will let you style the highlight:
/* webkit, opera, IE9 */
::selection { background: tomato; }
/* mozilla firefox */
::-moz-selection { background: tomato; }
Might come in useful.
Related
I know it sounds wired. Currently I have multiple checkboxs I want to make it looks like radio button
following CSS not working in IE
input[type='checkbox'] {
-webkit-appearance: radio; /* Chrome, Safari, Opera */
-moz-appearance: radio; /* Firefox */
appearance: radio; //how about IE>8 ?
}
The appearance property is not supported in Internet Explorer. You would need to instead target the pseudo element ::-ms-check and affect its presentation, and even this will only get you part-way:
::-ms-check {
border-radius: 50%;
}
As Spudley stated in the comments above, this is a bad idea. Radio buttons and checkboxes function in distinctly different ways, and users have been taught to distinguish between the two.
I want make the scrollbar for my site dark and customize it. It works on Chrome with ::-webkit-scrollbar but it doesn't work on Edge -- I couldn't find way changing the scrollbar color on Microsoft Edge.
Does anyone know how to do this? Please help :)
There is currently no way to do this in Microsoft Edge. In IE there were vendor specific, non-standard, CSS properties to achieve this. These were removed in MS Edge as they could be used to target the browser and break compatibility with sites that were expecting old IE behaviour (the properties are very old). Unfortunately there are no good standard properties in CSS to replace these at the moment.
There is a UserVoice suggestion you can vote on to add a method to style scrollbars. We use this as one of the inputs when planning feature priorities in the EdgeHTML engine.
The following worked for me:
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: orange;
}
*::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}
For more info: https://www.digitalocean.com/community/tutorials/css-scrollbars
I have found some strange behaviour in Internet Explorer (IE10 and also when emulating all versions that support ::after). When applying the pseudo-element to a hover state of an element (.element:hover::after) it does not work in IE, but it does in all other major browsers.
http://jsfiddle.net/BramVanroy/9jpeZ/1/
#d1::after { /* Works in IE */
content: "no hover needed";
border: 1px solid blue;
display: block;
}
#d2:hover::after { /* Does not work in IE */
content: "Y U NO WORK IN IE";
border: 1px solid blue;
display: block;
}
Is there a CSS fix available for this? (No JS/jQuery.)
This seems to be a bug in IE10 (even when it emulates other versions).
I have, though, found a workaround. If you add an empty CSS rule for #d2:hover, it will then listen to #d2:hover::after as shown in this JSFiddle.
I had an instance where this wasn't working in IE as well,
When I switched the order of ":hover" and ":after" in my style sheet from
.myclassname::after:hover
to
.myclassname:hover::after
I was able to get the desired result, all the way back to IE9 (didn't test anything lower)
How can I disable the new functionality in Internet Explorer 10 that shows a little 'x' in a textbox when it's focused and I have content in it?
input[type=text]::-ms-clear {
display: none;
}
In IE 10+, text inputs (input[type=text]) show a (x) button on the right-side on the field once you start typing, it's used to clear/remove the entered text value.
In Chrome, search inputs (input[type=search]) show a similar button.
If you prefer to remove either of them for IE10+ and/or Chrome. You can add the style below to hide this button from the input.
See it in action...
http://codepen.io/sutthoff/pen/jqqzJg
/* IE10+ */
::-ms-clear {
display: none;
}
/* Chrome */
::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
display: none;
}
This is how I did it
input[type=text]::-ms-clear
{
display: none;
}
input::-ms-clear{
display:none;
}
This did the trick for me.
Note that the style and CSS solutions don't work when a page runs in compatibility view. I'm assuming that this is because the clear button was introduced after IE7, and so the IE7 renderer used in compatibility view doesn't see ::-ms-clear as a valid style heading.
For some reason, I have some problem with my CSS positioning on a social networking sharing tray on my site..
The even odder aspect of the problem is that it's only showing up in IE and FF..
I've tried playing with the CSS properties in FireBugg, but to no avail.
The link is here:
http://www.marioplanet.com/index.asp
The look in FF and IE makes the icons look all jumbled, while in Safari and Chrome, you can see that they are all lined up properly.
Could anyone help explain this odd phenomenon?
Try add this rule, it's image border when I view it in FF.
a.trayIcon img { border: 0px; }
I changed line 85 in default.css:
#facebookicon, #youtubeicon {
margin-left: 22.5px;
}
to
#facebookicon, #youtubeicon {
margin-left: 17px;
}
and it looks like chrome.