CSS does not seem to work on the option tag on Microsoft Edge for Mac OSX.
Is there a trick to change the text color or background?
All the other browsers work.
Testing on Version 107.0.1418.24 (Official build) (arm64).
<html>
<body>
<select>
<option id="red" style="color:red;">Red</option>
<option id="blue" style="color:blue;">Blue</option>
</select>
</body>
</html>
I test on Chrome for Mac OSX, it has the same issue. I searched and found that it's a known issue of Mac OS. You can refer to this similar thread and this issue report link.
There's no solution to style the <option> for WebKit browsers on Mac OS for now as it is provided by the native system select. If you really need to use styled <option> on Mac OS, I'm afraid you can only write your own select component using <ul>,<li> and style them using CSS.
Related
I'm trying to get emoji in a dropdown (select tag) menu in my Angular 6 project. I'm using unicode for this. So far I only managed to get some emoji (like ♥) to show. I want emoji like these: 😄😐😡 but all I see in the browser is an empty square.
I tried creating a simple, plain html file and than the emoji all show up in the dropdown menu. However, when I try to implement this in the angular template, it doesn't work anymore.
I also tried downloading the Symbola font and adding it to the CSS, but no luck there either.
This is the template:
<div class="postContainer postContent bg-dark" style="width: 80%;">
<form class="postForm" [formGroup]="newPost" (ngSubmit)="saveNewPost()">
<label class="text-warning label">Smiley</label>
<select formControlName="smiley" class="custom-select mr-sm-2 col form-control-lg" id="inlineFormCustomSelect"
[ngClass]="{ 'is-invalid': submitted && f.smiley.errors }">
<option selected>Choose...</option>
<!-- Attempt with the Symbola emoji font -->
<option value="Smiley1"><span class="emoji">😄</span></option>
<!-- Attempt without the Symbola emoji font -->
<option value="Smiley2">😄</option>
</select>
</form>
</div>
In my styles.css the font-face for the Symbola font
#font-face {
font-family: "emoji", "Symbola";
src: url("./assets/fonts/emoji/Symbola-Emoji.woff") format("woff"),
url("./assets/fonts/emoji/Symbola-Emoji.ttf") format("ttf");
}
In the template's CSS file adding the Sybmola and emoji fonts:
.emoji {
font-family: "emoji", "Symbola";
}
It's weird that it's working in a separate html file, but not within my Angular project. I'm using Visual Studio Code editor, if that matters. Does anyone know what the problem is here?
Update 1:
If I copy the emoji itself and place it in a variable in the component:
smiley: any = '😄';
And then enter it in the template:
// Form and select tags...
<option value="Smiley2">{{smiley}}</option>
It shows the smileys in the dropdown menu in Firefox, but not in Chrome.
Update 2:
It seems to be a Chrome issue. I tested a few random smileys and so far only emoji from unicode 7.0 to 10.0 (https://emojipedia.org/unicode-7.0/) work for the select tag in Chrome, older versions don't. The emoji from other version however do show up in 'normal' tags like paragraph tag. Just not in the option tag of the select menu. All emoji I want to use are part of unicode versions 6.0 and 6.1
Does anyone know how to solve this issue?
Update 3:
So I added a few emoji to the dropdown menu and restarted Angular and Chrome. The emoji all show, even those from unicode version 6. However if I refresh (F5) the page, the emoji from version 6 disappear from the menu. So I guess my problem is now half solved:
Not really a code based answer, but I found a solution for Chrome.
Apparently, I had a Chrome extension installed (Chromoji), which supposedly allows newer emoji in Chrome. It did, because the emoji looked different with that extension (the newer emoji unicode was visible). I removed the extension and now I only see the older version, but at least all emoji are visible now all the time.
This has been a pain in the neck for me for days. I hope Google will solve their emoji issue one day.
I woke up to a wonderful surprise this morning. The flex attribute is no longer working in Chome (working as expected in FF, Safari and IE however).
The following markup:
<span flex="true"></span>
<div layout="column" flex="75" class="layout-column"></div>
typically gets converted to:
<span class="flex" flex="true"></span>
<div layout="column" flex="75" class="layout-column flex-75"></div>
It would appear that the intended behavior converts the flex attribute and property to an associated class. This appears to no longer be working in Chrome. Is anyone else experiencing this issue?
It looks like a new version of Chrome was released last night. I think it may have been a breaking change.
Additional Info:
Angular Material: 1.1.5
Chrome: Version 61.0.3163.100 (Official Build) (64-bit)
The problem
In IE11 the image in the following code is clickable to activate/toggle the input in the label:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
(Demo at jsfiddle)
Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).
This was tested and reproduced on:
IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
IE 11.0.9600.16438 on Windows RT 8.1 tablet.
IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
IE 11.0.10240.16431 on Windows 10
This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.
Questions:
Can this be solved without JS while still using image tags?
If not, what other possible solutions are there?
(Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?
One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)
label{
display: inline-block;
}
label img{
pointer-events: none;
}
(Demo at jsFiddle)
Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.
.
The checkbox/radio has to be outside of label, it has to have own unique ID and label has to have attribute for which contains the ID of checkbox/radio its related to:
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">
If you done that and if you use PHP (which you probably are), you can use this piece of code:
if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
?>
<script>
$(document).ready(function() {
$("label img").on("click", function() {
$("#" + $(this).parents("label").attr("for")).click();
});
});
</script>
<?
}
I know its JS, but there is actually no other fix for =< IE10 without JS usage.
It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).
Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.
I have strange IE behavior on cursor property css?
Here is the code, this is just simple inline style to show what is the problem?
<div style="width:100%;">
<select>
<option value="">Select</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
<option>John</option>
</select>
</div>
<textarea style="cursor:not-allowed;"></textarea>
All i working OK in Firefox and Google Chrome, only in IE is the problem, when option get over textarea cursor change style to not allowed? Please take a look at fiddle here but only in IE?
Working fiddle
http://jsfiddle.net/f6paL8sc/
It seems this is a IE related Bug. I've made a solution and it works *(*IE required a .cur file to work ); but lets check the DEMO first.
In this example I used disabled attribute to disabled the textarea because you are using cursor:not-allowed which gives a impresson of that field is disabled.
Download this PNG image and convert it into (.cur) using this Online tool
Here is the CSS used.
textarea[disabled]
{
display:block;
cursor:url('http://www.dolliehost.com/dolliecrave/cursors/cursors-cute/cute25.gif'), url('cute25.cur'), wait;
background:gold;
}
In HTML code I disabled the textarea which makes more sense here.
<textarea disabled>This TextArea is disabled</textarea>
NOTE: I haven't got chance to test on IE but it must work.
Any way to make a OS X Finder "like" but valid XHTML/CSS search textfield with an X to the right, etc.? Even if it only shows up on Safari but degrades that would be fine. I've seen a couple of examples but they seem very complicated.
If you're OK with supporting only the newest WebKit-based browser, you can use the new HTML5 feature like this:
<form>
<input name="q" type="search">
<input type="submit" value="Find">
</form>
That's it, no CSS, no Javascript or whatever!
See an excellent discussion here.