<input> doesn't inherit the font from <body>

前端 未结 4 1355
难免孤独
难免孤独 2020-11-29 00:42

I have input and label fields:




        
相关标签:
4条回答
  • 2020-11-29 00:52

    I've had the same problem. What worked for me was adding the style directly to the input element in the html. I'm coding in React fyi.

    <input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />

    0 讨论(0)
  • 2020-11-29 01:02

    Form items (inputs/textarea/etc) don't inherit font information. You'll need to set the font-family on those items.

    0 讨论(0)
  • 2020-11-29 01:04

    It does not inherit by default but you can set it to inherit with css

    input, select, textarea, button{font-family:inherit;}
    

    demo: http://jsfiddle.net/gaby/pEedc/1/

    0 讨论(0)
  • 2020-11-29 01:12

    Three years later, I'm finding it strange <input> elements of types reset, submit, and button don't inherit font-family in Chrome or Safari. I discovered they would not receive padding either.

    But when I mess with certain properties, like background, border, or this strange appearance property, then font-family and padding have effect, but the native look and feel of the button is lost, which is not a problem if you are completely restyling the buttons.

    If you want a native looking button, with inherited font-family, use the <button> element instead of <input>.

    See Codepen.

    0 讨论(0)
提交回复
热议问题