Styling disabled <select> in Chrome - html

For styling disabled elements I used:
[disabled] { /* Text and background colour, medium red on light yellow */
color:#933;
background-color:#ffc;
}
It's work perfectly in all browsers except Chrome. Is there exists a way to overcome this using css without classes, because I have a huge amount of elements on different pages and don't want to change it all.
Thanks in advance.
UPDATE
After some investigation I have realized that this can be reproduced only if client has a server OS like Windows 2008 and use only Chrome browser. But I hope its a rear condition in real life.

It seems to be working just fine using Chrome 15.
input[disabled] {
color: #933;
background-color: #ffc;
}
Make sure you´ve cleared any cached style sheets.
Created a jsFiddle.
UPDATE
Noticed your question title and updated the example.
It´s seems to be a known issue for Chrome in Windows, see Style disabled multiple select – google chrome

The code below is works for me (style the option colors not select box itself):
<select multiple="multiple" disabled="disabled">
<option style="color:#CCCCCC;" value="1" selected>Monday</option>
<option style="color:#CCCCCC;" value="2" selected>Tuesday</option>
<option style="color:#CCCCCC;" value="3">Wednesday</option>
<option style="color:#CCCCCC;" value="4">Thursday</option>
<option style="color:#CCCCCC;" value="5">Friday</option>
<option style="color:#CCCCCC;" value="6">Saturday</option>
<option style="color:#CCCCCC;" value="7">Sunday</option>
</select>

Related

html select size or height do not work on mobile browsers

A simple code:
<select size=5 style='height:100px;'>
<option value='1'>one</option>
<option value='2'>two</option>
</select>
Desktop browsers will show a 100px height list with 2 visible elements.
Chrome and Safari for iPad show a drop-down list with no visible elements.
I have found in google some discussions about it, they are from 2010 and without a solution - they say that this does not break w3c specifications. I can agree that it was ok for old little 320x240 smartphones.
Is it still not working on modern 10" 2160x1620 iPads?
This is a known bug in webkit browsers.
The simplest way to get it to work just how you like it in Chrome and Safari would be to manually specify the styling the select itself.
select {
height: 54px;
font-size: 14px;
}
<select size="3">
<option value="">Default</option>
<option value="1">op1</option>
<option value="2">op2</option>
<option value="3">op3</option>
</select>

HTML Form: Datalist Option Tag Text is not showing in Chrome

I am working in a HTML Form. I added some HTML tags including Datalist. In datalist I want to show suggestion to user with different text and want to send the different value to server.
As you can see the below image that I found on Google like datalist works like this means showing Value in left and Text in right but now its not working.
<input list="some-list">
<datalist id="some-list">
<option value="first_value">Some Description</option>
<option value="another_value">Another Thing Here</option>
<option value="first_second_third">More Stuff</option>
</datalist>
You can see a simple live FIDDLE where you can text it on Chrome Updated Version Browser.
The code is working on Edge, Firefox, Avast Secure Browser, Opera, IE11 but not on Chrome. My question is simple Why it is not working as shown in Pic in Chrome now?
Please update to latest chrome and check. its chrome browser bug.
<input type="text" list="some-list">
<datalist id="some-list">
<option value="first_value">Some Description</option>
<option value="another_value">Another Thing Here</option>
<option value="first_second_third">More Stuff </option>
</datalist>

Change Select Option Element Font Family, Size etc

I am trying to change the font size of select option elements.
on my development server, my browser is firefox 52.0.2. here it shows fine. please see the below image:
Number-1: it get the font size from select style and works fine.
Number-2: it get the font size, and color from option element style and also works fine.
but when I test live on another computer where the firefox version is 57.0.1. it is showing like below image:
Note: you see? only color changes work but font size/family is not :(
this is the code I am trying:
<Select name="GurdianRelation" id="GurdianRelation" style="font-family:scUniFont1; font-size:24px; line-height:normal; text-align:left; width:300px;">
<option value="00" selected disabled hidden>অনুগ্রহপূর্বক নির্বাচন করুন</option>
<option value="01" style="color:#F00; font-size:32px;">পিতা/মাতা</option>
<option value="02">ভাই/বোন</option>
<option value="03">দাদা/দাদী</option>
<option value="04">নানা/নানী</option>
<option value="05">চাচা/চাচী</option>
<option value="06">ফুফু/ফুফা</option>
<option value="07">মামা/মামী</option>
<option value="08">খালা/খালু</option>
<option value="09">অন্যান্য</option>
</Select>
I have tried following so solution, none of them works:
select option font-size
Change HTML dropdown option font size
so, I am out of ways now.. and expecting some help :)
thanks in advance
best regards

CSS targeting select option with display:none not working in Safari and IE

I have come across a strange CSS issue.
I have a drop down selector like this HTML markup:
<select id="cat_p" name="cat_p" onchange="ListChildCategories(this.options[this.selectedIndex].value, 0);" class="required validate-list">
<option value="-1" selected="selected">- Choose a category</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
<option value="5">Category 5</option>
</select>
Now, I want to hide one of these select option (let´s say Category 5) using CSS, so I use this CSS code:
select#cat_p option[value="5"] {
display: none;
}
And the result is perfect in Chrome and Firefox, but in Safari and IE this CSS does not work.
I have checked in Safari developers panel and I can see that the CSS is registered as valid and it is not "crossed out" / overwritten by other CSS, so it should work, I would think.. very weird..
Does anyone have a clue what the problem is here?
I made a fiddle so you can see the problem first hand:
http://jsfiddle.net/wH8kF/
You can not use toggle or display:none property or the hide/show with select option in the Safari browser. It is working for all other browsers like Chrome, Firefox, etc. This is part of a long and inconsistent tradition with Safari restricting CSS styling functionality on form elements, believing the visual language of interactive elements should be consistent with the OS (no point trying to find a rationale for IE's failings).
Your only options are either to remove it (and re-append it later), or to set it to optnz.disabled = true. Sorry for the bad news!

how to change font for <select>

I am trying to get font from google for one of my project.
Font is working perfectly, but for <select> font is not coming.
Any idea how to apply font for select, option in jsf?
I tried in style, by making class etc... but nothing is working.
Below is what I have in source code even when I have select {font-family: 'fontName'}
<select name="j_idt205" size="1">
<option value="Any" selected="selected">Any</option>
<option value="Muslim">Muslim</option>
<option value="Christian">Christian</option>
<option value="Others">Others</option>
</select>
Main Problem
In FF, its proper, but in Chrome, its default Chrome font.
Any idea why this is happening?
Upon further investigation, I found this is happening with MAC Chrome and Safari only. This is just driving me crazy!!!
implement font-family on select
http://jsfiddle.net/sTPFY/
select {font-family:fontname}