修改uniapp中 input 的 placeholder 样式

使用placeholder-class增加类名(这个可以

<input type="text" class="search-input" placeholder-class="search-input-placeholder" placeholder="输入关键词搜索" /><style scoped>
/deep/ .search-input-placeholder {color: red;
}
</style>

但是有限制和注意点

  1. 只能使用font-size、font-weight、color这几个属性
  2. 如果style中有scoped时,需要在类名前加上/deep/

使用placeholder-style直接写行内样式(这个我没生效

<input type="text" class="search-input" placeholder-style="color: red" placeholder="输入关键词搜索" />

使用原生css方法修改(这个我没生效

input::placeholder {// some code
}
<!-- 其他浏览器兼容 -->
/* - Chrome ≤56,
- Safari 5-10.0
- iOS Safari 4.2-10.2
- Opera 15-43
- Opera Mobile >12
- Android Browser 2.1-4.4.4
- Samsung Internet
- UC Browser for Android
- QQ Browser */
::-webkit-input-placeholder {color: #ccc;font-weight: 400;
}/* Firefox 4-18 */
:-moz-placeholder {color: #ccc;font-weight: 400;
}/* Firefox 19-50 */
::-moz-placeholder {color: #ccc;font-weight: 400;
}/* - Internet Explorer 10–11
- Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {color: #ccc !important;font-weight: 400 !important;
}/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {color: #ccc;font-weight: 400;
}/* CSS Working Draft */
::placeholder {color: #ccc;font-weight: 400;
}

有些样式是生效到input元素的属性中的

比如我这边本次就是要修改padding-left,最后暂时放弃先去修改输入值的属性的时候无意中发现的

.search-input {background-color: #fff;height: 70rpx;width: 460rpx;border-radius: 250rpx;padding-left: 64rpx;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/863822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker harbor仓库搭建,主从库复制

背景&#xff1a;需要主机安装docker-ce和docer-compose #1.安装相关依赖. yum install -y yum-utils device-mapper-persistent-data lvm2 #2.下载官方的docker yum源文件 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo …

10款好用不火的PC软件,真的超好用!

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/市场上有很多软件&#xff0c;除了那些常见的大众化软件&#xff0c;还有很多不为人知的小众软件&#xff0c;它们的作用非常强大&#xff0c;简洁…

cJSON源码解析之add_item_to_object函数

文章目录 前言add_item_to_object函数是干什么的add_item_to_object代码解析函数实现函数原理解析开头的代码constant_key参数的作用最后的if判断 add_item_to_array函数 总结 前言 在我们的日常编程中&#xff0c;JSON已经成为了一种非常常见的数据交换格式。在C语言中&#…

MySQL 索引之外的相关查询优化总结

在这之前先说明几个概念&#xff1a; 1、驱动表和被驱动表&#xff1a;驱动表是主表&#xff0c;被驱动表是从表、非驱动表。驱动表和被驱动表并非根据 from 后面表名的先后顺序而确定&#xff0c;而是根据 explain 语句查询得到的顺序确定&#xff1b;展示在前面的是驱动表&am…

UI Toolkit系统学习

UI Toolkit 此文章用于学习UnityUI系统&#xff0c;手头的项目做完会来完善 官方文档 Unity上方菜单栏点击Window->UI Toolkit->Samples可以看UI Toolkit中的很多样例 使用 UI Toolkit 和 UI Builder 制作物品编辑器 在文件夹中右键->Create->UI Toolkit->Edi…

英特尔 Gaudi 加速辅助生成

随着模型规模的增长&#xff0c;生成式人工智能的实现需要大量的推理资源。这不仅增加了每次生成的成本&#xff0c;而且还增加了用于满足此类请求的功耗。因此&#xff0c;文本生成的推理优化对于降低延迟、基础设施成本以及功耗都至关重要&#xff0c;其可以改善用户体验并提…

leetCode-hot100-动态规划专题

动态规划 动态规划定义动态规划的核心思想动态规划的基本特征动态规划的基本思路例题322.零钱兑换53.最大子数组和72.编辑距离139.单词拆分62.不同路径63.不同路径Ⅱ64.最小路径和70.爬楼梯121.买卖股票的最佳时机152.乘积最大子数组 动态规划定义 动态规划&#xff08;Dynami…

【训练篇】MLU370-M8 完成 qwen1.5-7b-chat-lora训练及推理

文章目录 前言一、平台环境配置二、环境 or 模型准备1.模型下载2.环境准备2.1 modelscope2.2 transformers2.3 accelerate2.4 deepspeed2.5 peft2.6 环境代码修改 3训练代码准备4 代码修改 三&#xff0c;训练后推理验证四.推理效果展示1.微调前2.微调后 前言 本期我们采用魔塔…

【高考志愿】医学

目录 一、明确职业定位与兴趣 二、选择大学与专业 三、考虑身体条件 四、了解录取规则 五、考虑选科与成绩 六、注意志愿填报策略 七、关注就业前景 八、资深医生的建议 高考志愿填报学医时&#xff0c;考生需要综合考虑多个因素&#xff0c;确保自己能够做出明智的选择…

short s1 = 1; s1 = s1 + 1;有错吗

这个问题涉及到Java中的数据类型转换和赋值操作&#xff0c;是一个常见的面试题&#xff0c;用于考察应聘者对Java语言基础知识的掌握程度。 技术难点 数据类型转换&#xff1a;在Java中&#xff0c;基本数据类型之间的运算需要遵循类型转换规则。特别是当较小的数据类型&…

URLSearchParams: 浏览器中的查询字符串处理利器

一、 概述 在Web开发中&#xff0c;处理URL的查询字符串是一个常见任务。URLSearchParams API 提供了一种简单而强大的方法来处理Web URL的查询参数。它是一个内置的浏览器API&#xff0c;允许你以名称/值对的形式轻松地创建、读取、更新和删除查询参数。 二、URLSearchParam…

PostgreSQL的系统视图pg_stat_wal_receiver

PostgreSQL的系统视图pg_stat_wal_receiver 在 PostgreSQL 中&#xff0c;pg_stat_wal_receiver 视图提供了关于 WAL&#xff08;Write-Ahead Logging&#xff09;接收进程的统计信息。WAL 接收器是 PostgreSQL 集群中流复制的一部分&#xff0c;它在从节点中工作&#xff0c;…

distance delayed sound

distance delayed sound 在本章中&#xff0c;我们将讨论在游戏音频中使用距离延迟的重要性。我们将首先通过一个常见的例子——闪电和雷鸣&#xff0c;来展示这种重要性并解释距离延迟音频的基础知识。我们将讨论计算速度、距离和时间的数学和方程式&#xff0c;以确定距离延迟…

数据倾斜优化:Hive性能提升的核心

文章目录 1. 定义2. 数据倾斜2.1 Map2.2 Join2.3 Reduce 3. 写在最后 1. 定义 数据倾斜&#xff0c;也称为Data Skew&#xff0c;是在分布式计算环境中&#xff0c;由于数据分布不均匀导致某些任务处理的数据量远大于其他任务&#xff0c;从而形成性能瓶颈的现象。这种情况在H…

PotPlayer安装及高分辨率设置

第1步&#xff1a; 下载安装PotPlayer软件 PotPlayer链接&#xff1a;https://pan.baidu.com/s/1hW168dJrLBonUnpLI6F3qQ 提取码&#xff1a;z8xd 第2步&#xff1a; 下载插件&#xff0c;选择系统对应的位数进行运行&#xff0c;该文件不能删除&#xff0c;删除后将失效。 …

【强化学习的数学原理】课程笔记--2(贝尔曼最优公式,值迭代与策略迭代)

目录 贝尔曼最优公式最优 Policy求解贝尔曼最优公式求解最大 State Value v ∗ v^* v∗根据 v ∗ v^* v∗ 求解贪婪形式的最佳 Policy π ∗ \pi^* π∗一些证明过程 一些影响 π ∗ \pi^* π∗ 的因素如何让 π ∗ \pi^* π∗ 不 “绕弯路” γ \gamma γ 的影响reward 的…

2024/6/30周报

文章目录 摘要ABSTRACT文献阅读题目问题本文贡献方法LSTMTCN模型总体架构 实验实验结果 深度学习TCN-LSTM代码运行结果 总结 摘要 本周阅读了一篇关于TCN和LSTM进行光伏功率预测的文章&#xff0c;本文提出了一种利用LSTM-TCN预测光伏功率的新模型。它由长短期记忆和时间卷积网…

ThreadPoolExecutor基于ctl变量的声明周期管理

个人博客 ThreadPoolExecutor基于ctl变量的声明周期管理 | iwts’s blog 总集 想要完整了解下ThreadPoolExecutor&#xff1f;可以参考&#xff1a; 基于源码详解ThreadPoolExecutor实现原理 | iwts’s blog ctl字段的应用 线程池内部使用一个变量ctl维护两个值&#xff…

Vue异步DOM更新

Vue.js 是一个构建用户界面的渐进式框架&#xff0c;它采用了一种称为“响应式系统”的机制来跟踪数据的变化&#xff0c;并在数据变化时自动更新 DOM。然而&#xff0c;Vue 并不总是立即更新 DOM&#xff0c;而是会等待一个“tick”或“微任务”的完成&#xff0c;然后再进行批…

树莓派开发之文件传输

文章目录 一、简介使用U盘传输文件使用SD卡传输文件使用Xftp 7传输文件 二、 总结 一、简介 在树莓派开发中经常会用到文件传输&#xff0c;下面介绍几种树莓派文件传输的几种方法。 使用U盘传输文件 &#xff08;1&#xff09;复制所需传输文件到U盘 &#xff08;2&#…