Skip to main content
PleaseWork1978
PleaseWork1978
Inspiring
August 25, 2021
Question

PHP Form Dropdown Has Default Font Instead Of Embedded Font?

  • August 25, 2021
  • 4 replies
  • 2042 views

So I have a contact.php with a form area that contains a drop down, using an embedded font (Fig. 1 below).

Everything displays fine, except, on the dropdown menu items area the font defaults to a sans-serif instead of the embedded font (Fig. 2 below).

 

Is there are way to force the dropdown menu items to be shown in the embedded font, just like the front facing part of the form does?

 

 

 

1. contact.php with embedded fonts displayed fine.

 

 

2. contact.php drop down menu item defaulting to san-serif font.

    This topic has been closed for replies.

    4 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 26, 2021

    Have you tried advanced CSS form stylying with appearance:none?

    https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling

     

    I find it interesting that Firefox now supports the vendor prefix for -webkit.  I guess if you can't beat 'em, join 'em.  🙂

     

     

    Nancy O'Shea— Product User & Community Expert
      PleaseWork1978
      PleaseWork1978Author
      Inspiring
      August 26, 2021

      I placed it, but I must be missing something else, because it’s still failing to show with the correct font in Chrome.

      It’s working great now in Safari and Firefox though.

       

      Screenshot posted in the above reponse btw. 

       

       

      W
      wake6
      Known Participant
      August 26, 2021

      It is working in Chrome on Windows:

       

      W
      wake6
      Known Participant
      August 25, 2021

      btw, the font does seem to work correctly in Chrome, for me, but not in Firefox.

      O
      osgood_
      Legend
      August 25, 2021
      quote

      btw, the font does seem to work correctly in Chrome, for me, but not in Firefox.


      By @wake6

       

      Yes, the styling of certain form aspects with css, like 'select', 'option'  is limited and not hugely stable in all browsers, they treat them differently. You can get better looking styling by creating your own dropdowns but this requires some coding knowledge.

      PleaseWork1978
      PleaseWork1978Author
      Inspiring
      August 25, 2021

      Yeah, more and more I'm realizing that creating a drop down on javascript is the way I'm going ti have to go, to get the more concise uniformity I'm looking for. 

      My only question now is, can I build onto this preexisting php form, with ecerything in place as it is, and add the javascript drop downs (there are two drop downs on this form) to the preexisting php page and form?

      O
      osgood_
      Legend
      August 25, 2021

      I don't think you can specify a specific font within a default <select></select> form. You would have to build a custom drop-down menu using javascript.

        W
        wake6
        Known Participant
        August 25, 2021

        I went to https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_form and added this code

        <head>
<style>
select{
font-family: times;
}
</style>
</head>

        and re ran it and it altered the font.

         

        W
        wake6
        Known Participant
        August 25, 2021

        Can we see your html and css?
        I suspect that your css doesn't define a font for the <select> tag.

        PleaseWork1978
        PleaseWork1978Author
        Inspiring
        August 25, 2021

        I'm not at my machine right now, but I have select and option as well as other IDs, classes, etc., all listed on the same CSS line, pointing to the same font. 

        Which is why it works on every other part of the form. 

        But as soon as I get the chance I'll post the code, maybe there's something else wrong that other will be able to see. 

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices