Element: [Bug Report] CSS for textarea and for input is not the same (theme-chalk)

[xxbillouxx]

Element UI version

2.0.7

OS/Browsers version

Ubuntu 16.04 / Chrome Version 62.0.3202.62 (Official Build) (64-bit)

Vue version

2.5.9

Reproduction Link

https://jsfiddle.net/xxbillouxx/662m1q7a/

Steps to reproduce

The jsfiddle page provides an example showing that the CSS style (theme-chalk) for an input and for a textarea is not the same.

What is Expected?

The characters inside input and textarea shoud have the same size/font/...

What is actually happening?

The first thing that we can see is the size of the characters inside the input and the textarea.

[Leopoldthecoder]

I think they do have the same size and font. Is there any screenshot where they are different?

[xxbillouxx]

capture from https://jsfiddle.net/xxbillouxx/662m1q7a/ :

[xxbillouxx]

I have just tried under Windows / Version 62.0.3202.94 (Official Build) (64-bit) : same problem.

I think it is a problem with the Chrome user agent stylesheet.

I continue to investigate...

[xxbillouxx]

Yeah, it seems that the user agent stylesheet override the definitions :
https://stackoverflow.com/questions/27847588/user-agent-stylesheet-override-my-own-styles

If I use normalize.css, it is better (but I don't know if it really the desired layout for the ElemeFE team) ;

(took from https://jsfiddle.net/xxbillouxx/0e2xnb8f/)

[xxbillouxx]

For example, _Bootstrap_ uses _Reboot_ to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements. _Reboot_ is a collection of element-specific CSS changes and is based on _Normalize_.
http://getbootstrap.com/docs/4.0/getting-started/introduction/#important-globals

Another example : _HTML5 Boilerplate_ includes _Normalize_.
https://html5boilerplate.com/

Is anybody has this problem (user agent stylesheet) with _Element_ ? Or am I alone ? 😢
Any suggestions ?
Should I use normalize.css ?

Thank you.

[wacky6]

Font is consistent on my Chrome 62 macOS, so I guess this is a windows only problem?

I've checked developer tools, element does not explicitly set font for input or textarea. Can you help inspect and find out where the font setting is from?

Developer tools / Elements / computed panel may help.

---

If normalize.css works for you, you can use it.

[xxbillouxx]

Hi,

as I said previously in my bug report (please have a look at all my comments), I have the problem with :

• Ubuntu 16.04 / Chrome Version 62.0.3202.62 (Official Build) (64-bit)
• Windows / Version 62.0.3202.94 (Official Build) (64-bit)

I have investigated more and I have found :

• for the <input> element : the font-family is not defined in _theme-chalk_. So Chrome uses the user agent stylesheet to define the font-family:Arial
  

• for the <textarea> element : the font-family is not defined in _theme-chalk_. So Chrome uses the user agent stylesheet to define the font-family:monospace
  

So I don't know if this problem can considered as an issue in _theme-chalk_ : the font-family should be added in _theme-chalk_ ?

[wacky6]

I don't think it's a good idea to define/enforce particular font styles in element. (What if the user wants to use different fonts, or they want some particular reset.css / normalize.css implementation)

I think you should include the "reset" stylesheet of your choice at the moment.

@Leopoldthecoder What do you think?

[Leopoldthecoder]

@wacky6 is right, we don't define font-family in our style sheet. It's up to the user to set the font according to the typography of a given project. Take the Element docs for example, we defined font-family in https://github.com/ElemeFE/element/blob/dev/examples/app.vue#L10 .

You can use something like normalize.css, and if you prefer, you can simply add one line of CSS to define font-family.