Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
338 views
in Technique[技术] by (71.8m points)

html - <input> height on Mac

The following code:

<input style="height: 80px; width: 200px;" value="test button">

Works fine on Windows, Linux etc. However Mac uses the system button style for <input> tags. These seem to not be able to be given a custom height (Firefox overrides the system button style so it's fine but Chrome and Safari on Mac have the below problem):

Instead of having a 80px wide and 200px high button there is the Mac button style and a gap on top and below. The width gets set fine.

How do I override this so that Chrome and Safari on Mac show a tall button?

EDIT: Here's what happens on Mac: Mac input{ height: 200px; } problem
Here's what should happen (works on Windows, Linux):

Normal input{ height: 200px; }

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Add :

input[type=button] {
    -webkit-appearance: button;
}

in your CSS :-)

Here is the list of all values this property can take. By default, WebKit uses a custom style (with fixed height) for the buttons.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...