css - 更改 textInput 闪亮小部件的占位符颜色
问题描述
通过在 Stackoverflow 上的不同旧帖子中找到一些 CSS 代码,我设法更改了我的 shinyapp 的每个 selectizeInput 和 selectInput 小部件的占位符颜色,但似乎此代码不适用于 textInput 小部件。
您可以在下面找到一个基本的可重现示例:
library(shiny)
ui <- fluidPage(
tags$style(HTML("::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;}
::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}")),
br(),
selectizeInput(inputId = "one",
label = NULL,
choices = c("Letters" = "", "A", "B", "C"),
selected = ""),
br(),
textInput(inputId = "two",
label = NULL,
placeholder = "Numbers",
value = "")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
如您所见,textInput 小部件的占位符仍然是灰色的,而我也希望它是红色的。
预先感谢您的帮助!
解决方案
您的问题完全在于添加 CSS 似乎是合理的,因为这样做
var q = document.createElement("style");
q.innerHTML = `::placeholder { color: red }`;
document.body.appendChild(q)
在选择演示页面上确实将占位符文本着色为红色。
至于第二个问题,要针对特定元素,您希望选择器像
#e6-selectized::placeholder { color: red }
(注意后缀)
推荐阅读
- laravel - 带有队列的 Laravel 侦听器不执行
- c++ - 我可以用 premake 打印最终组装的 gcc 命令吗?
- python - Pandas read_fwf 难以解释类似日期的字符串
- node.js - npm install 漏洞对于不同的项目是不同的
- angular - Angular Schematics,修改 angular.json 的代码没有放在一起
- reactjs - 我们如何在 React Native 中使用 iOS 位代码支持?
- c++ - QAbstractTableModel headerData 删除标题
- razor-pages - 知道如何在 Razor Pages 显示中以更清洁的方式进行空检查吗?
- mysql - MySQL Visual Studio 2019 集成
- c - 可变参数函数未正确传递第一个参数