如何使用CSS为html字符添加边框颜色?

2024-03-19

我目前的任务是在显示某些数据时在不同颜色的 pandas DataFrame 表内创建检查。

我找到了以下内容:

<p>I will display <span style="color:green">&#10004;</span></p>
<p>I will display <span style="color:yellow">&#x2714;</span></p>

虽然这本身是有效的……如果可能的话,最好让它们更大,或者至少在支票本身周围有一个边框(而不是在它周围有一个框)。

显然这不是正确的方法,因为它是 ASCII 字符,所以很好奇是否有人发现了类似的需求。 Google 仅返回复选框信息,而不返回支票。


只需使用text-shadow在刻度线图标周围添加边框。此外,您可以通过增加图标的大小来进一步提高可读性。


检查代码片段下面是使用的实际示例text-shadow并增加图标大小:

    p:nth-child(1) span {color:green; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-size: 50px;}

    p:nth-child(2) span {color:yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
<p>I will display <span>&#10004;</span></p>
<p>I will display <span>&#x2714;</span></p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用CSS为html字符添加边框颜色? 的相关文章

  • Javascript 放大/缩小到鼠标 x/y 坐标

    我设法让鼠标拖动来滚动div 但是用鼠标放大 缩小不完整 它有效 但我希望鼠标指针将图像保持在该位置并同时缩放它 如下所示 我需要使用scrollBy 将滚动返回到缩放之前的上一点 有人知道该怎么做吗 这是某人制作的小提琴https jsf
  • jquery 文本旋转

    我在 div 中有一个简单的文本 如下所示 div div This is an example text div div 我希望 div 内的文本旋转 20 30 度 我已经找到了this https stackoverflow com
  • 需要正则表达式(使用 C#)将所有空白压缩为单个空白

    我需要将文档中的多个空格替换为单个空格 每次迭代 无论它们是空格 制表符还是换行符 任何类型的空格的任何组合都需要被截断为单个空格 假设我们有字符串 Hello t t n t n world 其中 t 和 n 分别代表制表符和换行符 那么
  • 扩展引导程序预输入的宽度以匹配输入字段

    我知道这个问题之前至少被问过三次 但我看到的答案并不是我想要的 我希望增加 twitter bootstrap 通过其 typeahead 功能生成的自动完成字段的宽度 我一直在读到它延伸到覆盖该字段中的所有文本 也就是说 文本越长 自动完
  • 在 pandas 条形图中设置 xticks

    我在下面的第三个示例图中遇到了这种不同的行为 为什么我能够正确编辑 x 轴的刻度pandas line and area 情节 但不与bar 修复 一般 第三个示例的最佳方法是什么 import numpy as np import pan
  • ReactJS 水平对齐material-ui 元素

    我试图在文本输入旁边有一个单选按钮 这样用户基本上可以输入问题的 答案 并标记一个首选答案 然而 Material UI 将每个都放在自己的行上 这就是我目前所拥有的 div div
  • onclick 函数上的 CSS 选择器

    有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a
  • 在 pandas 中单独打印一列的原始值?

    我有一个数据框 df pd DataFrame name george age 23 name anna age 26 现在我想检索乔治的年龄 df df name george age 但这会输出一些额外的信息以及原始值 0 23 Nam
  • Chrome 中的错误或 CSS 错误? (隐藏可见性的锚点)

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
  • 第一次从按钮提交时,只有单击两次后才会打开模态框

    我有一个模式弹出窗口可以通过单击按钮打开 不幸的是 当第一次在浏览器中提交时 我只能在单击两次后才能看到弹出窗口 但是 一旦弹出窗口打开并关闭 我就可以在下一次尝试中单击一次来打开模式 如果我刷新浏览器也会发生同样的情况 这看起来很奇怪 任
  • Disqus 评论数始终为 0 条评论

    我想我已经按照通用代码的说明设置了 Disqus 问题是它总是说某个帖子有 0 条评论 拿这个帖子来说 http tx0rx0 com retropie and the raspberry pi http tx0rx0 com retrop
  • 使用 pandas 将字符串对象转换为 int/float

    import pandas as pd path1 home supertramp Desktop 100 life 180 data csv mydf pd read csv path1 numcigar Never 0 1 5 Ciga
  • 模板中的 bson.ObjectId

    我有一个具有 bson ObjectId 类型的结构 例如如下所示 type Test struct Id bson ObjectId Name string Foo string 我想在 html 模板中呈现它 Name Food a h
  • Pandas:将 pytz.FixedOffset 应用于系列

    我有一个带有timestamp列看起来像这样 0 2020 01 26 05 00 00 08 00 1 2020 01 26 06 00 00 08 00 Name timestamp dtype datetime64 ns pytz F
  • 清理 html 字符串中的所有脚本

    HTML5 剪贴板很棒 但我正在寻找一种使其安全的方法 用户正在将文本 html 粘贴到我的网页中 这允许他们粘贴图像 表格等 我正在寻找一种方法 在将粘贴的内容添加到页面之前删除所有脚本 我需要删除
  • CSS :hover 影响所有子 div

    我里面有一个父 div 和多个子 div 我希望这样 如果您将鼠标悬停在父 div 上 它会以不同的方式影响所有子 div 的悬停状态 即 一个 div 的文本带有下划线 另一个 div 的文本会更改颜色 并且保存图像的 div 使图像稍微
  • 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲
  • 使用 div 或表格来包含链接列更好吗?

    我的页面底部有 3 列链接 每列都放入一个 div 中 所有三个 div 都包装在页面中央的一个大 div 中 这是更适合桌子的东西还是桌子不适合这项工作 您还可以使用 ul http www w3schools com tags tag
  • 背景大小:封面在视网膜显示屏上看起来像素化

    可以看到我正在开发的网站here http ourcityourstory com dev 如果你查看 iPad 3 或 iPhone 4 上的 关于 或 联系 部分 背景看起来全都是疯狂的像素化 我有background size set

随机推荐

  • 在渲染服务器端之前获取数据

    现在我正在发现Este js我对同构应用程序有一个小问题 我不明白如何在使用 renderToString 渲染服务器端之前进行 api 调用 一种解决方案是使用 React Router 在路由器级别获取所有数据 根据顶层路由 我可以预测
  • 在 MatSnackBar 中使用“snackBar.openFromComponent()”方法时如何放置操作按钮?

    我使用 MatSnackBar 进行通知 并且希望在小吃栏中有一个操作按钮 使用时如何插入 snackBar openFromComponent method Here is my code https stackblitz com edi
  • Facebook API 用于读取已添加书签的项目

    Facebook 最近添加了一项新功能 允许为有趣的链接添加书签以供以后阅读 保存的链接可在 保存 选项卡中找到 是否有任何 Facebook API 例如 Graph API 用于检索这些保存的项目 用于访问 Facebook 已保存链接
  • 如何进行全局字符串替换而不需要转义所有内容?

    我想用另一个字符串替换字符串中出现的所有模式 例如 让我们将所有 转换为 gt 纯 string replace 仅替换第一个匹配项 replace gives 正则表达式迫使我转义为特殊字符 replace g Pattern is no
  • 如何格式化 Multimarkdown 表格?

    我正在按照以下表格部分下的指南编写 Multimarkdown 表格语法指南 http fletcherpenney net multimarkdown users guide multimarkdown syntax guide 我希望使
  • 将根据数量复制记录的查询

    我正在使用 SQL Server 2008 并寻找一个将根据数量复制记录的查询 表具有 QTY 和 PartNumber 列 需要为每个数量添加一条附加记录 假设零件编号的数量为 3 我需要包含该零件编号的三行 任何帮助将不胜感激 谢谢 测
  • 如何删除注册表中损坏的符号链接

    我正在对注册表进行一些编辑原型 以创建从一个区域到另一个区域的符号链接 我使用了以下代码 HKEY hkFS HKEY hkSOFTWARE DWORD dwDisposition LSTATUS result result RegOpen
  • 比较函数指针

    如何比较 C 中的函数指针 稳定吗 例如 这样的事情是否有效 if pFnc myFnc Do something C 03 5 10 1 expr eq 等于 和 不等于 运算符具有相同的作用 语义限制 转换和结果类型作为关系 运算符 但
  • postgresSQL中NOT IN和NOT EXISTS的区别

    Here s my table 当我使用 NOT IN 执行以下查询时 它给出了 namal 和 Ann SELECT firstname FROM info student info WHERE firstname NOT IN SELE
  • ClickOnce 或 InstallShield 能否安装 SQL Server 或 SQL Server Express?

    可以 ClickOnce 或 InstallShield 设置或配置 SQL Server 或 SQL Server Express 专门添加sa密码 启用命名管道 授予从文件夹读取的权限 添加主数据库 mdf我的客户端应用程序所需的文件
  • Swift SpriteKit SKSpriteNode 的“有时”不出现

    我正在使用 Swift 和 SpriteKit 制作 iOS 但是 我的应用程序运行时遇到不规则现象 有时船舶 SKSpriteNodes 不会出现在屏幕上 有时子弹的 SKSpriteNodes 不会出现 有时一切都显示良好 我将子弹添加
  • AlertDialog 中的资源 ID #0x0

    我添加一个AlertDialog在 kotlin 文件中 但出现异常 btnLogin setOnClickListener view gt login fun login val builder AlertDialog Builder t
  • 如何对整数字符串进行排序?

    我在对具有整数值的字符串列表进行排序时遇到一个奇怪的问题 然而 某些值可以以某些字符作为前缀 e g B1 5 50 A10 7 72 B3 A1 A2 基本上有页码 应该按如下方式排序 A1 A2 A10 B1 B3 5 7 50 72
  • 我们可以让聊天机器人先说问候语,而不仅仅是作为反应吗

    我正在使用 Microsoftt Bot Framework 和 LUIS 认知服务开发聊天机器人 我想要一条初始欢迎消息 例如 你好 用户 你好吗 我的机器人一启动 在 MessageController 中可以做任何事情 public
  • 在 gitlab-ci.yml 上动态设置工件路径/文件夹结构

    我有以下内容gitlab ci yml读取的文件package json使用jq https stedolan github io jq 处理器动态设置工件文件夹的变量名称 类似于 image node latest stages buil
  • Angular 2 - FormGroup ValueChanges 取消订阅

    我有一个带有 ValueChanges 事件的 FormGroup 当用户从组件的路由移动到另一个组件然后返回到该组件时 该事件不会从内存中释放 这意味着 如果用户离开组件然后返回组件 5 次 则 onFormChange 方法会触发 5
  • 在 IE 和 Chrome 中动态加载 jQuery

    我正在创建一个使用 jQuery 的外部小部件 而不是让用户单独包含它 我想检查它是否已加载 如果没有加载 则动态加载它 问题是我需要等到它加载后才能执行脚本的其余部分 这需要 IE 和 FF Chrome 处理不同的事件处理程序 如果我这
  • 帮助处理 Android 库项目中的自定义视图属性

    我在 Android 库项目中有一个自定义 PieTimer 视图 package com mysite android library pietimer public class PieTimerView extends View 我还有
  • Intel 指令文档中未使用 XMM 寄存器 0

    在 Intel x64 手册中 它说 32 位 SSE2 模式下有 XMM 寄存器 0 7 那么为什么 95 使用这些寄存器的指令会跳过 0 并使用 1 4 例如Intel的vol 2手册entry https www felixclout
  • 如何使用CSS为html字符添加边框颜色?

    我目前的任务是在显示某些数据时在不同颜色的 pandas DataFrame 表内创建检查 我找到了以下内容 p I will display span style color green 10004 span p p I will dis