用CSS隐藏占位符

2024-04-04

我正在使用响应式主题。我在这里面临输入表单问题。在桌面视图中,输入不会有占位符,但有标签。

但是,当涉及到移动视图时,我将隐藏此输入标签并使用占位符更改此标签。

<input name="name" type="text" placehoder="insert your name"> 

如何用 CSS 隐藏这个占位符?


这将仅隐藏台式机(和大型平板电脑)的占位符:

@media (min-width:1025px) and (min-width:1281px) {
     ::-webkit-input-placeholder {
        /* WebKit browsers */
         color: transparent;
    }
     :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
         color: transparent;
    }
     ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
         color: transparent;
    }
     :-ms-input-placeholder {
        /* Internet Explorer 10+ */
         color: transparent;
    }
     input::placeholder {
         color: transparent;
    }
     textarea::-webkit-input-placeholder {
        /* WebKit browsers */
         color: transparent;
    }
     textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
         color: transparent;
    }
     textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
         color: transparent;
    }
     textarea:-ms-input-placeholder {
        /* Internet Explorer 10+ */
         color: transparent;
    }
     textarea::placeholder {
         color: transparent;
    }
}

在 Codepen 上检查一下 https://codepen.io/anon/pen/gNmYNP.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

用CSS隐藏占位符 的相关文章

  • Javascript 播放声音性能重吗?

    我正在用 Javascript 制作一个简单的游戏 当一个物体与墙壁碰撞时 它会发出 砰 的声音 声音的响度取决于物体的速度 速度越高 gt 声音越大 播放功能 playSound function id vol ID of the sou
  • 输入类型=图像 - onclick(),将触发其事件,但在 jquery 中的函数上表现不佳

    我认为这可能是两篇文章 2个问题 所以如果你对此发表评论 我会将它们分开 主要问题实际上是 我怎样才能为按钮设置图像背景 简单且正确 我想现在我可以确定这些事实了 因为我在将图像设置为按钮背景时遇到了 小 问题 我想 好吧 如果很难设置的话
  • 从 MVC 中的 FormCollection 获取选定的下拉列表值

    我有一个使用 MVC 发布到操作的表单 我想从操作中的 FormCollection 中提取选定的下拉列表项 我该怎么做 我的 HTML 表单
  • 将父容器扩展至 100% 高度以容纳浮动内容

    我正在为一个客户项目而苦苦挣扎 我的全部divs 没有绝对定位 height 100 for html body 和容器divs 但静态内容未达到其内容 在 910 像素处 我可以将溢出属性更改为auto 并且背景会继续向下到内容的末尾 但
  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli
  • 使用 CSS 自定义字体?

    我见过一些在其网站上使用自定义字体的新网站 除了常规的 Arial Tahoma 等 他们支持大量的浏览器 如何做到这一点 同时 如果可能的话 还会阻止人们免费下载该字体 一般来说 您可以使用自定义字体 font face在你的 CSS 中
  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有
  • 使用 jQuery 清除 IMG

    我正在尝试从 a 中删除加载的图像 img 元素 但清除或删除 src 不会执行此操作 该怎么办 HTML img src https www google com images srpr logo3w png JQUERY img att
  • 如何在HTML中的PHP中注释掉HTML和PHP?

    这是我想注释掉的一行代码 h1 class post title a href title a h1 一种流行的注释方法是分别注释 html 和 php 有一个更好的方法吗
  • HTML5 历史 API

    我如何使用 HTML5 历史 api 我确实经历过https developer mozilla org en DOM Manipulated the browser history https developer mozilla org
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • W3C 验证器:“握手警报:unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

随机推荐

  • 没有持久化:Fluent nHibernate 异常

    我收到异常 没有持久化 MVCTemplate Common Entities User 我谷歌这个问题并应用我找到的所有解决方案 但一切对我来说都没用 有谁知道我做错了什么 我的用户类代码是 public class User publi
  • 如何让Hibernate不删除表

    我正在使用休眠 每当我尝试添加记录时 它都会删除表并再次添加它 它从不使用现有的表并对其进行更改 这是我的相关部分hibernate cfg xml
  • Kivy/Python Countdown App 项目 kivy has no attribute 'built' 错误

    问题 什么是 没有属性 构建 错误 我需要做什么来更正此代码 以便它可以接受日期时间对象并显示倒计时 抱歉发了这么长的帖子 我已经提供了代码和链接 kv 文件 https github com tmusa CySat GroundStati
  • Excel:下拉列表取决于另一个下拉列表

    我想要在 Excel 中执行以下操作 相邻单元格中的两个下拉列表 下拉列表 1 下拉列表 1 Dropdown list 1 One Two Three 如果我在第一个单元格中选择一个 第二个单元格中的列表应包含以下选项 One 1 1 1
  • 当我运行我的 android UIAutomator 代码时,它显示错误

    当我运行我的 android UIAutomator 代码时 它显示以下错误 INSTRUMENTATION RESULT shortMsg java lang RuntimeExceptionINSTRUMENTATION RESULT
  • Objective-C instantiateViewControllerWithIdentifier 返回 nil

    一周后我打开了我的项目 看来对于所有新的UIViewController我创建于StoryBoard instantiateViewControllerWithIdentifier返回为零 一切ViewControllers项目中已经存在的
  • Flask 和 SQLAlchemy 以及 MetaData 对象

    这是我第一次使用这个环境 我愿意使用的 SQLAlchemy 部分只是允许我使用 autoload True 的表对象查询数据库的部分 我这样做是因为我的表已经存在于数据库 mysql 服务器 中 并且不是通过定义 Flask 模型创建的
  • 在单例上使用 Dispose 来清理资源

    我的问题可能更多地与语义有关 而不是与实际使用有关IDisposable 我正在致力于实现一个单例类 该类负责管理在应用程序执行期间创建的数据库实例 当应用程序关闭时 应删除该数据库 现在我正在处理这个删除Cleanup 应用程序在关闭时调
  • 如何在 Bash 脚本中从一系列 _# 文件名中选择最大数字

    我有一个包含文件的目录 heat1 conf heat2 conf heat
  • Silverlight 4 和浏览器外

    有谁知道是否可以对 app current mainwindow width 进行动画处理 以便在以编程方式调整 oob 应用程序窗口大小时获得一个带有缓动的漂亮动画 谢谢 最简单的方法是向页面添加滑块控件 滑块可以折叠 仅用于具有简单的动
  • VBA 自函数返回#VALUE!单元格出错,而在函数窗口中正确返回实际值

    我在下面写的函数是采用一个范围 我对其进行了一些条件格式设置 用于字体颜色 以及另一个用于比较颜色的单元格范围 功能是统计大范围内有多少个单元格与一个单元格范围具有相同的字体颜色 Function CountColor rng As Ran
  • 在logstash中使用docker GELF驱动程序env/labels

    Docker GELF 日志驱动程序允许env and labels日志选项 gelf 日志记录驱动程序支持 lab els 和 env 选项 它添加了额外的密钥extra字段 以下划线 为前缀 ref https docs docker
  • 分配给 Rails ActiveRecord 中的布尔字段时,值如何转换?

    我的问题的简短版本 在 Rails ActiveRecord 中 如果我有一个布尔字段并且我给它分配类似 abc or 2 然后它立即转换为false 价值1被投射到true and nil仍然是nil 为什么会这样呢 在哪里可以找到解释此
  • PHPUnit:存根多个接口

    我正在掌握 PHPUnit 到目前为止发现它非常容易使用 但我遇到了一个给我带来困难的测试用例 我正在针对一组预期对象实现的接口 一些是 PHP 的 一些是自制的 编写代码 并且 SUT 需要一个输入对象来实现多个接口 例如 class M
  • 计算两个模型的梯度

    假设我们正在构建一个基本的 CNN 来识别猫和狗的图片 二元分类器 此类 CNN 的示例如下 model Sequential Conv2D 32 3 3 input shape Activation relu MaxPooling2D p
  • 在JetPack Compose中手动重构所有AndroidView

    在我的项目中 我使用 JetPack Compose 和 AndroidView 来使用 XML 视图 Composable fun MyComposable message String AndroidView factory conte
  • MSBuild /m:4 失败,因为它构建了同一个项目两次

    我的团队有一个大型解决方案 约 500 个 csproj 我们使用 VS2012 并使用 TFS Build 进行构建 TFS Build 使用 MSBuild 4 目前我们串行构建 但我们希望并行构建 使用msbuild maxcpuco
  • Maven 不会使用公钥来部署

    我正在使用 SSH 将我的 Java 工件部署到服务器 我设置了密钥 以便可以交互式 SSH 到服务器而无需密码 但是当我尝试运行 mvn deploy or mvn release perform 命令 它挂起 我认为是密码提示 My m
  • iOS RestKit 无法将本地实体保存到数据库

    我正在使用 RestKit 0 20 解析 JSON 数据并保存到数据库 这里有一个映射实体 SchoolClass 它由 RestKit 处理并保存得很好 我有另一个名为 MyClass 的实体 它存储我选择的类 这仅在设备上是本地的 这
  • 用CSS隐藏占位符

    我正在使用响应式主题 我在这里面临输入表单问题 在桌面视图中 输入不会有占位符 但有标签 但是 当涉及到移动视图时 我将隐藏此输入标签并使用占位符更改此标签