html修改按钮宽度,HTML/CSS如何修改submit按钮的宽与高

您所在的位置:网站首页 设置input的高度和宽度怎么设置 html修改按钮宽度,HTML/CSS如何修改submit按钮的宽与高

html修改按钮宽度,HTML/CSS如何修改submit按钮的宽与高

2024-07-15 06:46| 来源: 网络整理| 查看: 265

今天在做米扑理财(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;" />

效果图如下:

5e257f1c737d5094109a7997f23003bd.png

参考推荐:



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3