伪元素和 SELECT 标签

2024-05-17

是否select标签允许使用:after选择器是为了在之后创建一个伪元素吗?

我在 Mac 上尝试过 Chrome、Safari 和 Firefox,但似乎不起作用。


这是我使用过的折衷方案。http://jsfiddle.net/pht9d295/3/ http://jsfiddle.net/pht9d295/3/

body {
  background-color: #f6f6f6;
  padding: 10px;
}

.select-wrapper {
  background-color: #FFF;
  display: inline-block;
  position: relative;
}

.select-wrapper:after {
  content: "\f078";
  font-family: 'FontAwesome';
  position: absolute;
  top: 13px;
  right: 10px;
  z-index: 5;
  pointer-events: none;
}

select {
  padding: 10px 40px 10px 10px;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #bbb;
  background-color: transparent;
  border-radius: 0;
  position: relative;
  cursor: pointer;
  z-index: 10;
}
<div class="select-wrapper">
  <select>
    <option>United Kingdom</option>
    <option>Canada</option>
    <option>United States</option>
  </select>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

伪元素和 SELECT 标签 的相关文章

  • CSS位置:绝对+动态高度

    我有 4 个 div 标签一个接一个 全在position absolute我使用它们对齐top and left 第三个 div 标签包含动态内容 并且 div 的高度根据其中的文本量而变化 然而 当我设置top and left在所有
  • 使用 Javascript/jQuery 和 CSS 更改 PNG 颜色

    我有一个黑色的心 PNG http 1 bp blogspot com yq ZSKg39Tk TOvzVx9sC5I AAAAAAAAAb0 GcN4O Ciq3s s1600 black heart png我想用不同的颜色显示 如何使用
  • scrapy获取同一个类的第n个子文本

    我附上了一张照片 我面临的问题是获取同一类的第一个元素 我想得到 adxHeader gt adxExtraInfo 1st one gt adxExtraInfoPart 1st one gt a text 我编写了以下代码但不起作用 任
  • 如何在 flutter/dart 中使用设定大小的自定义字体?

    我正在尝试使用color fontWeight and fontFamily with style style copyWith 我尝试使用的自定义字体是Vonique 我已经将它像这样导入到pubspec yaml fonts famil
  • 当我“显示:无”一个 SVG 时,另一个(独立的)SVG 会以不同的方式呈现

    我已经伤透了几个小时了 这没有任何意义 我将遇到的问题减少到这个codepen https codepen io Octopous pen OJORpJQ https codepen io Octopous pen OJORpJQ HTML
  • 当我尝试转发电子邮件时,时事通讯无法隐藏 Gmail 上的响应内容

    我正在尝试写一份时事通讯 但当我测试时 我无法隐藏响应式内容GMail On Outlook and Yahoo一切正常 但如果我尝试转发电子邮件 隐藏的内容就会可见 我测试使用 putsmail https putsmail com gt
  • Bootstrap:下拉菜单无法通过 jQuery 单击打开

    我正在创建一个包含多行的表 所有行都有一个 选项 按钮 该按钮应该显示下拉上下文菜单 为了使代码更短 我使用了一个div以便将其重用为上下文菜单的通用标记 我正在使用 Bootstrap 5 1 3 和 jQuery 3 6 0 以下是我的
  • 有不同图像尺寸的缩略图 Bootstrap

    我想要包含不同大小和不同文本量的图像的缩略图 但我希望它们都具有相同的大小 像这样来自 Bootstrap 站点的示例 http getbootstrap com components thumbnails custom content 下
  • 如何仅在第一次访问时弹出模态窗口

    我有一个模式窗口 当您访问某个页面时会弹出 访客必须选择我同意或我不同意 我需要一个漂亮的小 jquery 脚本 它会记住谁之前访问过该页面并同意 这样他们每次访问该页面时就不会弹出模式 有人可以推荐一个好的脚本来使用吗 这是代码 div
  • 在CSS中,有什么比使其成为块元素更好的强制元素换行的方法呢?

    我有一个 H3 标题 我想将其样式设置为具有特定的背景颜色 但不让元素的背景占据父元素的整个宽度 鉴于 H3 默认情况下是块元素 我的样式需要将该元素更改为内联块元素 或者只是内联内联元素 如下所示 h3 background color
  • Bootstrap 列中的标题高度相同

    我有这样的 html bootstrap css div class container div class row div class col xs 6 col div class block div class title strong
  • CSS 计数器输出不匹配

    有人可以解释一下为什么吗section计数器值总共打印 0h2 tags 这是源代码
  • 等宽字体中的字体大小和字符宽度之间有什么依赖关系?

    等宽字体中的字体大小和字符宽度之间有什么依赖关系 在我的网络应用程序中 我使用 courier new 字体 我想知道 字符串的实际长度 以像素为单位 是多少 如果我知道CSS font size属性 它如何帮助我知道字符串的实际长度 谢谢
  • CSS 无法与 CodeIgniter 一起使用

    这是我的 CI 代码的一部分 class page extends CI Controller var Page public function construct parent construct this gt Page 1 this
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • 具有固定位置的平滑滚动标题

    当我将位置更改为固定时如何创建平滑滚动 我尝试添加动画但不起作用 最好使用jquery动画 window scroll function var sticky mobile menu scroll window scrollTop if s
  • 动态检测屏幕高度和屏幕宽度,以精简图像的高度和宽度

    我以前可以display a div标签仅在portrait使用下面提到的代码corrl https stackoverflow com users 15388872 corrl in this https stackoverflow co
  • jQuery - 拖动div css背景

    我希望能够在 div 内按住鼠标并移动它的背景 在谷歌上搜索了很多 没有找到我想要的 这是目标 显示的地图是要拖动的对象 http pontografico net pvt gamemap http pontografico net pvt
  • 如何中和 CSS 定义而不覆盖

    有没有一种方法可以中和元素的 CSS 规则而不覆盖所有内容 例如 我正在使用 Twitter Bootstrap 它有许多预定义的 CSS 定义table 在某些地方 我不想要它们 对某些table元素 我想知道我是否可以做这样的事情 ta
  • 为 Gmail 设计 HTML 电子邮件

    我正在生成一封使用内部样式表的 html 电子邮件 即 h2 class foo Email content here 在 Gmail 中查看时 内部样式表中的所有样式似乎都被忽略 Gmail 似乎忽略了内联规则以外的所有样式 例如 h2

随机推荐

  • 如何在重定向操作中传递 ActionMessage 和 ActionError [重复]

    这个问题在这里已经有答案了 可能的重复 我可以在不同的操作类之间传播 struts2 ActionErrors 吗 https stackoverflow com questions 1070111 can i propagate stru
  • Booking.com酒店管理API

    我拥有一家酒店 并在 booking com 上查看了 API 因为我想创建自己的前端界面来更新我的酒店房价 房间数 以及通过该 API 上传图片 更新酒店描述 然而 我唯一能找到的是一个 API 供联营公司以一定的价格获取特定位置的酒店等
  • 在 HTML 文件中包含模板文件,类似于 CSS?

    我正在使用 HTML
  • Angular 2:基于环境导入服务

    根据 Angular CLI 项目中的当前环境导入服务的最佳 正确方法是什么 我已经设置了一个名为 dev mock 的新环境 我可以使用它来调用 ng serve environment mock 然后我使用 useClass 在模块中设
  • 使用 javax/json,如何将元素添加到现有的 JsonArray 中?

    我从文件中读取了一个 JSON 数组 但我想向该数组中添加其他条目 我将如何使用 javax json 库来做到这一点 private String getJson FileInputStream fis throws IOExceptio
  • flutter 中 sqlite 中的多个参数

    我想知道如何将多个参数传递给 sqllite 中的原始查询 我的代码如下 query async get a reference to the database Database db await DatabaseHelper instan
  • 如果用户不活动,SignalR 会发生什么?

    我想知道如果用户不活动会发生什么 想象一下用户连接到集线器 连接已建立 但用户没有刷新页面或一个小时没有执行任何操作 无论如何连接都会保持吗 那过了这个时间还可以推送消息给他吗 SignalR 发送 keep alive 消息 即使没有其他
  • 你能识别 Haskell 程序中的无限列表吗? [复制]

    这个问题在这里已经有答案了 可能的重复 如何判断列表是否是无限的 https stackoverflow com questions 7371730 how to tell if a list is infinite 在Haskell中 你
  • cURL 错误 77:设置证书验证位置时出错:CAfile

    我正在使用 Firebase php SDKlink https firebase php readthedocs io en latest index html并在 Windows 10 上的 XAMPP 服务器上使用 laravel 最
  • 在每台计算机安装中删除 HKCU 下的注册表项

    我使用 WiX 3 6 构建了一个 perMachine 安装程序来安装我尚未开发的软件 不幸的是 该软件在执行期间在 HKCU 下创建了一些注册表项 卸载时 还应删除自行创建的密钥 移除这些钥匙似乎并不那么容易 我正在与 ICE57 和
  • 重复使用相同的卷曲手柄。性能大幅提升?

    在 PHP 脚本中 我对不同的 URL 执行了许多不同的curl GET 请求 一百个 将重复使用来自curl init提高性能 还是与请求的响应时间相比可以忽略不计 我这么问是因为在当前的架构中保持相同的句柄并不容易 交叉发布自我应该关闭
  • 在 ASP.NET 中加密 cookie

    我想在 ASP NET 中加密 cookie 我已关注本文的方法 http www codeproject com KB web security HttpSecureCookie aspx 但它有一个缺点 那就是在内部方法上使用反射 这导
  • 加速美丽汤

    我正在运行本课程网站的抓取工具 我想知道将页面放入 beautifulsoup 后是否有更快的方法来抓取页面 花费的时间比我预期的要长得多 Tips from selenium import webdriver from selenium
  • Qt:如何连接到 SQLite?

    我安装了 SQLite3 解压到 c sqlite 创建了一个数据库 c sqlite mzsales 现在我试图在 QTableView 中显示其内容 QSqlDatabase db QSqlDatabase addDatabase QS
  • scanf() 和 strtol() / strtod() 在解析数字方面的区别

    Note 我完全重新设计了这个问题 以更正确地反映我设置赏金的目的 请原谅这可能造成的与已给出答案的任何不一致 我不想创建一个新问题 因为之前对此问题的回答可能会有所帮助 我正在致力于实现一个 C 标准库 并且对该标准的一个特定角落感到困惑
  • 如何在 Zend Framework 中存储 cron 作业的脚本?

    因为 ZF 的所有 URL 都依赖于 mod 重写 所以我并不清楚应该在哪里存储用于 cron 作业的本地脚本 有人有什么建议 或者有 正式接受 的方式吗 我用模块化目录结构 http framework zend com manual e
  • 如何在函数执行后停止 tkinter?

    我在停止 提要 时遇到问题 cancel 参数似乎对 after 方法没有任何影响 尽管 feed stop 被打印到控制台 我正在尝试使用一个按钮来启动源 另一个按钮来停止源 from Tkinter import Tk Button i
  • 如何使用 JavaScript 检测 CSS 变量支持?

    最新版本的 Firefox 支持CSS 变量 http www w3 org TR css variables 但 Chrome IE 和许多其他浏览器没有 应该可以访问 DOM 节点或编写一个小方法来返回浏览器是否支持此功能 但我还没有找
  • 跟踪 Linux 程序中活跃使用的内存

    我想跟踪各种程序在特定状态下接触了多少内存 例如 假设我有一个图形程序 最小化时 它可能会使用更少的内存 因为它不会重新绘制窗口 这需要读取图像和字体并执行大量库函数 这些对象仍然可以在内存中访问 但实际上并没有被使用 类似的工具top它们
  • 伪元素和 SELECT 标签

    是否select标签允许使用 after选择器是为了在之后创建一个伪元素吗 我在 Mac 上尝试过 Chrome Safari 和 Firefox 但似乎不起作用 这是我使用过的折衷方案 http jsfiddle net pht9d295