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}
Related
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>
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
The text between the option tags in a select box is not rendering correctly when open in my Chrome Version 37.0.2062.120.
See attached screenshot for a clear illustration of the issue.
When I select an option and focus away from the box the correct option is selected and renders correctly when the select box is closed.
I've tested the same in Canary 39.0.2161.0 and FF and it renders correctly without being distorted.
I've not seen anything like is before.
Anything to do with Chrome's recent font rendering update?
Any help is much appreciated.!
Link to page, form is at the bottom: http://dev.emarkadvantage.com/strategy.php
UPDATE: A fix that worked for me was to move the position of the SVG font down the #font-face stack to the bottom.
I have had this before. Use a standard (i.e. non web) font for your selects. I don't know why web fonts cause a problem...but they do.
See also this answer.
You should add class on select tag,
class="form-control"
<select id="category" class="form-control">
<option value="">Your top callenge today?</option>
<option value="Sales">Sales</option>
<option value="Competition">Competition</option>
<option value="Marketing ROI">Marketing ROI</option>
<option value="Positioning">Positioning</option>
</select>
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!
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>