相关疑难解决方法(0)

选择选项中的字体真棒图标

我尝试在几个选项的第一个选项中添加一个插入符号图标,如下图所示:

这是一个小提琴我的例子.

我无法在上面的小提琴上看到图标.

和相应的代码:

.wrapper {
  height: 200px;
  background-color: red;
  padding-top: 100px;
  padding-left: 150px;
}
#before-select {
  font-size: 30px;
  color: #ffffff;
}
select {
  border: none;
  background: transparent;
  /*background-color: blue;*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 180px;
  padding-top: 0px;
  background-size: 20px;
  color: #ffffff;
  font-size: 30px;
}
select option {
  color: #424146;
  background: #ffffff;
}

Run Code Online (Sandbox Code Playgroud)

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<div class="wrapper">

  <form role="form">
    <span id="before-select">in</span>

    <select name="town">
      <option value="London">London <i class="fa …

Run Code Online (Sandbox Code Playgroud)

html css

mic*_*ltm

2019 02-19

35
推荐指数

5
解决办法

12万
查看次数

为什么:before和:after伪元素仅适用于Firefox？

我创建了一个select列表,其中包含选项:after和:before伪元素 - DEMO

option:after, option::before {
    content: " ";
    height: 5px;
    width: 5px;
    background: #c00;
    border-radius: 5px;
    display: inline-block;
}

Run Code Online (Sandbox Code Playgroud)

但是,这仅适用于Firefox,没有其他浏览器.

正如它在W3C,MDN,SitePoint上所述,:after它是" 在匹配元素之后呈现的伪元素,用于添加化妆品内容 ",并且没有人声明对它不能应用的元素的任何限制.

问题 - 为什么所有浏览器(FF除外)都无法正确显示伪元素？非常感谢任何文件.

css pseudo-element

Zol*_*oth

2012 09-19

3
推荐指数

1
解决办法

3951
查看次数