2009-11-05 74 views
12

如何增加OSX-Safari本机FORM提交按钮的大小?CSS:如何增加OSX提交按钮的大小

我想保留其相应操作系统的FORM提交按钮的本机外观,同时也扩大了提交按钮的大小。 (意思是,没有使用图片,自定义边框等)

使用下面的CSS:

input.submitbutton {font-size:150%;} 

在Windows中,这增加了提交按钮大小的高度和宽度根据需要......不管浏览器(Safari,Firefox,IE,Chrome)。

但是在OSX上 - Safari并没有增加按钮的大小。表单按钮大小保持默认大小。

回答

-1
input.submitbutton{ 
    width:200px; 
    height:500px; 
} 

似乎很明显,但你有没有尝试改变元素大小,而不是字体大小?

+0

刚刚尝试过,Safari似乎尊重宽度而不是高度。 – ceejayoz 2009-11-05 18:21:41

+0

是的,Safari不尊重身高......也不尊重'填充'。这就是为什么我创建这个职位 – TedH 2009-11-05 18:26:51

+0

将设置行高属性的工作?或者设置填充顶部,填充底部? – scunliffe 2009-11-05 18:32:09

3

Safari的窗体按钮非常难以风格(如果不是不可能的话)。

正如其他人所说,身高几乎不可触及。

你可以做的是将字体大小设置为一个确切的像素大小来调整按钮的大小。

input.submitbutton {font-size:14px;} 

这应该使字体大小和按钮以及。尽管...尽最大努力......你不能只是继续增加字体大小。

1

一个按钮的“本地外观”包括通过定义一个固定的高度

按钮规格

控制大小: 按下按钮 常规,小型和微型 可用大小。 按钮的高度为 固定为为每个尺寸,但您指定 的宽度,具体取决于您提供的标签文本的长度 。如果你 没有指定足够宽的按钮, 端盖剪辑文本。

你想会不会是“天然的”,因此必然需要一个自定义映像的创建,或者你总是可以做这样的事情

http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/

20

什么尝试,包括这个CSS属性对你的风格:

-webkit-appearance:button;

希望这会有所帮助!

+0

这对我有用。不知道Webkit默认不应用这个属性来输入[type ='submit']元素。 – 2012-01-26 17:10:03

1

如果您在按钮上应用边框,Safari会放弃它的光面按钮,您可以按照自己喜欢的方式进行操作。

1

我使用的几个输入type="button"和他们的风格确定使用:

input[type="button"] { 
-webkit-appearance: button; 
height:40px; 
} 

他们没有风格没有-wbkit-线。

0

这是一个边缘案例,但如果您尝试各种各样的事情,并且无法让Safari使按钮标签变小,那么可能会已激活“从不使用小于X的字体大小”选项Safari的偏好:

screen shot of Safari’s “Advanced” preference pane

这陷入僵局昨天我。关闭它,Safari将很多更可能尊重您的CSS指令。