Solution 1 :

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>

Problem :

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.

Comments

Comment posted by Temani Afif

you are targeting the input that has nothing to do with the text. Wrap the text inside span (or label) and target that element

Comment posted by Justinas

’90 called, they want

Comment posted by Heretic Monkey

There’s something very wrong with the HTML code here; the

Comment posted by WayneCa

That
I added in this post to break the line without you thinking it was that way in my actual webpage. I abhor horizontal scrolling.

Comment posted by WayneCa

Haha Justinas. Very funny. I am trying to get away from using those tags, but sometimes CSS is not so cooperative.

Comment posted by WayneCa

Thanks, ray. I will be using the span tag. It’s an easier fix since all I have to do is change FONT to SPAN. Thanks for the help.

Comment posted by this page

@WayneCa use the label element. you can put a span inside a label if you like, but you should have a label. if you set the

Comment posted by WayneCa

I was unaware of this. I will definitely look into using a label. Thanks.

By

Leave a Reply

Your email address will not be published. Required fields are marked *