Skip to main content
PleaseWork1978
Inspiring
Aug 25, 2021 7:01 PM UTC
Question

PHP Form Dropdown Has Default Font Instead Of Embedded Font?

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 is closed to new replies. Start a new post to keep the conversation going.

    20 replies

    Nancy OShea
    Community Expert
    Community Expert
    Aug 26, 2021 12:47 AM UTC

    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.  🙂

     

     

    Translate
    Nancy O'Shea— Product User & Community Expert
    PleaseWork1978
    Inspiring
    Aug 26, 2021 2:43 PM UTC

    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. 

     

     

    Translate
    Known Participant
    Aug 26, 2021 3:31 PM UTC

    It is working in Chrome on Windows:

     

    Translate
    Known Participant
    Aug 25, 2021 9:36 PM UTC

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

    Translate
    Legend
    Aug 25, 2021 9:50 PM UTC
    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.

    Translate
    PleaseWork1978
    Inspiring
    Aug 25, 2021 10:14 PM UTC

    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?

    Translate
    Legend
    Aug 25, 2021 9:26 PM UTC

    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.

    Translate
    Known Participant
    Aug 25, 2021 9:39 PM UTC

    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.

     

    Translate
    Known Participant
    Aug 25, 2021 9:25 PM UTC

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

    Translate
    PleaseWork1978
    Inspiring
    Aug 25, 2021 10:09 PM UTC

    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. 

    Translate