font-family vs font face
Question
I have read a few other threads here and on other sites about this issue, but I haven't found any solution that actually works using only CSS. Here is my issue. I want all of the input fields that have text descriptors (such as checkboxes and radio buttons) to have the Arial font. If I do this:
<INPUT type=radio name="Shaded" id="Flat" value="Flat"
onclick="OnItemSelect('Shaded',2);"><FONT face="Arial" size=2>Flat</FONT>
the word Flat within the font tag shows up as Arial. But if I do this:
<html>
<head>
<style type="text/css">
input {
font-size:8pt;
font-family:Arial!important;
}
</style>
</head>
<body>
<INPUT type=radio name="Shaded" id="Flat" value="Flat"
onclick="OnItemSelect('Shaded',2);">Flat
</body>
</html>
the word Flat shows up Times New Roman (my default page font). I have tried using a class (.inp) and it still doesn't work. What can I do to get this word to show up as Arial without having to use the FONT tag?
Edit: I removed the offensive <BR> from this post, but left the line split over two lines to prevent horizontal scrolling. I want to thank everyone who responded, as your help made the difference. But now I have one further issue with this, but on a checkbox instead of a radio button. Here's the code:
<INPUT type="checkbox" id="app" name="multiple_entry" value="multiple-type">
<STRONG><LABEL for="app"> Is </LABEL></STRONG>
<INPUT size=1 maxlength=1 value="0" name="current_entry">
<STRONG><LABEL for="app"> of </LABEL></STRONG>
<INPUT size=1 maxlength=1 value="0" name="max_entries">
<STRONG><LABEL for="app"> monsters of this kind.</LABEL></STRONG>
It works as expected when clicking on the text, but clicking the input boxes for the numbers doesn't affect the checkbox. Is there a way to make it where if the user clicks on one of those two inputs that it automatically checks the checkbox?
I don't know how to make use of the "try it" thing to be able to give you a way to see the button in action. Sorry.
1 answers
solution1
2 ACCPTED 2020-05-26 21:29:59
As everyone else has pointed out, you have several problems in your code, but here's a quick example of how you could do it. The first targets everything inside a <label> element (red) and the second is a bit more specific, targeting the word "flat" specifically with a css class (blue):
label { font-family: arial; color: red; }.my-classname { font-family: arial; color: blue; }
<label> <input type=radio name="Shaded" id="Flat" value="Flat" onclick="OnItemSelect('Shaded',2);"> Flat </label> <label> <input type=radio name="Shaded" id="Flat" value="Flat" onclick="OnItemSelect('Shaded',2);"> <span class="my-classname">Flat</span> </label>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.