html修改按钮宽度,HTML／CSS如何修改submit按钮的宽与高 - 米扑博客

今天在做米扑理财(https://blog.mimvp.com/fund)网页时，需要修改的宽度、高度。

发现如果直接这样添加   submit的宽高并不会发生变化。

上网查了很多资料，验证的结果如下：

1)在Mac和所有的苹果设备上，如果直接设置 的话，submit的宽高并不会发生变化。

2)在Firebox上面是正常的，包含Mac上运行的Firefox上都是正常

3)在Mac上的Chrome和Safari，按钮的宽高没有生效，不正常

解决办法：

后来查询大量资料，发现只要加上一行代码，就可以成功修改submit按钮的宽高，

那就是增加与 submit 按钮边框有关的属性，来间接使边框的宽高生效，

例如(任选之一或组合均可)：

添加按钮的背景颜色 background-color: #ccc;成功

添加按钮的边框圆角 border-radius: 5px;成功

添加按钮的边框为空 background: none;成功

添加按钮的边框外型 outline-style: auto;           失败

添加按钮的字体大小 font-size: 18px;                失败

成功的CSS样式如下：

input[type=submit]{

width:80px;

height: 30px;

line-height: 30px;

background-color: #ccc;

border-radius: 5px;

}

应用实例如下：

style="font-size: 18px; width:80px; height: 30px; line-height: 30px;

background-color: #ccc; border-radius: 5px;" />

效果图如下：

参考推荐：