h5移动端用input做按钮和button的区别

最新推荐文章于 2024-09-10 11:30:12 发布
最新推荐文章于 2024-09-10 11:30:12 发布
阅读量3.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32538087/article/details/89706596
版权

在我的项目中我遇到两次这样的问题——按钮的背景色不对，因为我用的是input （type="button"）。效果图如下：

设置成背景图也没用，突然就想到是不是input的问题（在背景图不对之前我没有设置任何的样式），然后我换成了button，然后就可以了，从来没有注意过这个问题。图：

over

 

专写bug~~~
关注
vue2/3 - h5移动端网页弹框式全选/反选/多选功能，vue手机端网页实现从底部弹出模态框进行勾选列表效果功能，弹框形式的列表多选、全选和取消全选（h5移动端项目弹框式列表多选，一键复制即用）
高级前端工程师
12-11 4506
vue，手机端网页，移动端网页，h5移动端项目，vue移动端h5网页如何实现弹框列表多选功能，弹框形式的列表复选框勾选，h5网页列表全选和反选，vue2手机网页底部弹框select实现多选全选，多选弹框选择器，弹框形式的列表多选选择器组件插件，底部弹框式列表多选功能，h5列表多选功能，vue h5弹框多选插件，多选弹框组件，H5手机网页多选弹框组件，vue手机端select多选选择器，弹框多项选择器，vue手机h5可以多选的弹框组件，h5弹框内可以多选的功能插件，vue可以选择多个值的选择器，同时又可以单选
html5按钮大全
05-08
html5的多个特效按钮。
<button>和<input type="button"> 的区别
weixin_30580341的博客
10-16 177
定义和用法 <button>标签定义一个按钮。 在button元素内部，您可以放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。 <button>控件 与<input type="button">相比，提供了更为强大的功能和更丰富的内容。<button>与</button>标签之...
HTML5 `＜button＞` 标签深入全面解析
最新发布
软考鸭
09-10 1417
标签广泛应用于各种交互式网页中，如表单提交、模态框的打开和关闭、导航菜单的展开和收起等。通过结合使用CSS样式和JavaScript事件处理，可以创建出既美观又功能强大的按钮。标签是一个功能强大且灵活的元素，它提供了丰富的属性用于定义按钮的行为和外观，同时也支持CSS样式和JavaScript事件处理。标签的用法和特性，我们可以更好地利用它来创建出优秀的交互式网页。在这个简单的例子中，我们创建了一个普通的按钮，其上的文本是“点击我”。标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一。
移动端点击某个按钮触发的时候，出现点击状态的方法
MelodyFreedom的博客
09-22 1440
div.btn-show:active{ background: #e2dfdf !important;     color: #a9a4a4 !important; }
HTML中button和input button的区别
ethan444163330的专栏
05-06 5846
一句话概括主题：具有相同的作用但是在可操控性方面更加强大。 HTML 4.01规范的Forms部分指 名表单有以下几种控制类型：buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object controls. 其中除了buttons/menus/object cont
HTML中input标签和button标签区别
qq_40407724的博客
08-17 3852
HTML中< input type=“button” >和< button >区别 关闭标签设置。 <input type=’‘button’’>标签使用时是单个标签；而< button >标签必须使用< /button>来结束标签的使用 样式属性。<input type=’‘button’’>不可以在标签内添加样式属性；&...
移动端H5实现搜索框样式源码
04-16
- **事件监听**：为`<input>`和`<button>`添加`addEventListener`，监听`keyup`、`keydown`、`blur`、`focus`等事件，实现即时搜索、失去焦点时清空内容等功能。 - **搜索功能**：如果需要即时搜索，可以使用`...
H5移动端点击按钮复制文本到粘贴板
allen_csdns的博客
02-27 3001
前端H5移动端点击按钮文本信息 使用开源项目 clipboard.js， 官网：https://clipboardjs.com/ 可以通过script标签引入 也可以通过npm安装，npm install clipboard.js --save-dev (注:这个插件复制的对象必须是input 或者 textarea 里面的值。所以说你要是想复制p标签或者其他文本 必须先设置一个input或者t...
h5移动端使用手机自带软键盘的“前往”、“go”键提交表单
qq_32538087的博客
04-30 5719
这也是我自己在项目中遇到的问题，在网上找了很久都没有找到类似的。试了很多次浪费了很多时间 登录和搜索时“前往”、“go”或者回车(电脑键盘)键提交表单（form） 表单里有一个type=”submit”或者type=”text”就可以用“前往”、“go”或者回车键提交表单 但是要注意，如果表单中有两个button按钮，一定都要设置type，不然提交不成功（因为用input我们都会去设置ty...
H5移动端常用代码及知识点
weixin_45567983的博客
10-21 1365
一. 使用rem作为单位 html { font-size: 100px; } @media(min-width: 320px) { html { font-size: 100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } } @media(min-width: 400px) { html { font-size: 1...
H5 input元素 type 常见属性值
Qiemo_的博客
05-08 1569
值 描述 button 定义可以点击的按钮(大多与JavaScript使用) checkbox 定义复选框 cloor 定义拾色器 date 定义日期字段(带有 calendar 控件) month 定义日期字段的月(带有 calendar 控件) time 定义日期字段的时、分、秒(带有 time 控件) email 定义用于e-mail 地址的文本字段 file 定义输入字段和"浏览..."按钮,供文件上传 hid
button标签与input标签的区别
weixin_46236141的博客
04-01 6701
button标签与input标签都有作为按钮的功能，那么它们之间到底有什么区别呢，实际项目中我们应该如何选择呢？，下面我们就来具体了解一下： input标签 作为按钮，有3种 type 效果： 1. 提交按钮 点击提交数据 <input type="submit" style="color:red;font-size: 50px;"> 2. 刷新按钮 点击恢复默认数据 <inp...
H5学习之路之Input类型新特性
红岸基地
05-31 869
input的输入类型在H5之前已经有很多很广泛的使用了，但是H5其实加入了很多新的属性和验证，提供方便的同时给我们开发带来了更多的是安全性的提升，今天我们就简单的说一下H5中新的input属性和用法。EmailE-mail: &lt;input type="email" name="user_email" /&gt;当我们使用email的时候，默然会检测到输入的格式是不是正确的，如果是使用的Iph...
button标签替代input type="button"
gaosong0623的博客
12-27 826
<button> 标签定义一个按钮。 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。 <button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都...
[JS][前端]修改文件input为button样式
热门推荐
坚持不懈
08-09 1万+
问题描述 在开发的时候，遇到了需要提交表单文件的需求，但是原生&lt;input&gt;标签特别不好看，而且还有点击提交文件的提示，这样很影响美观，于是便想着更改&lt;input&gt;为&lt;button&gt;按钮。 解决方案 建立一个button按钮，在其上面覆盖表单框，且设置表单的透明度为0，这样虽然用户看到的是button，但是点击的确实 将隐藏，当点击but...
Web前端自定义input按钮样式
lsy_u56的博客
05-24 5675
Web前端自定义input按钮样式 在html中一般我们定义一个< input type=“raddio” > 是自带样式的 但是我们有些时候会需要更改他的样式 一般我们会采用使用一个伪元素选择器，在::before,在label前插入一个新的元素 ::before,相当于label下的第一个子元素 在选择器里一定要写content:"",否则浏览器不会展示该元素，而定义display，主要是设置该元素的盒子类型，设置成block则为块盒，可以为元素设置宽高，但是会换行，设置成inline
做一个待办已办H5移动端的html页面
05-27
好的，下面是一个简单的待办已办H5移动端页面的示例代码，你可以参考它来创建自己的页面： ``` <!DOCTYPE html> , initial-scale=1.0"> 待办事项 /* 设置页面样式 */ body { font-family: Arial, sans-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值