如何编辑选择表格箭头？(Bootstrap 4)
4 javascript css jquery twitter-bootstrap bootstrap-4
我正在使用Bootstrap 4处理表单,我想编辑/更改箭头选择元素的样式,从第一个版本到第二个版本,如下所示.
我尝试了不同的方式(如所需的社区引用中所示)来编辑箭头,但我没有成功.
有人可以通过解释我如何达到预期的结果来帮助我吗？
请在下面找到我的HTML问题示例.
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Description" name="description">
<meta content="index,follow" name="robots">
<link href="/images/myicon.png" rel="icon" type="image/png">
<title>TITLE HERE</title>
<!--CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</body>
dev*_*una 10
只是一个例子.您可以将它用作参考.
在此示例中,您将学习自定义选择框的方法.但是,根据我的经验.旧浏览器不支持此方法.
select {
background-image:
linear-gradient(45deg, transparent 50%, red 60%),
linear-gradient(135deg, red 40%, transparent 50%) !important;
background-position:
calc(100% - 30px) 14px,
calc(100% - 20px) 14px,
100% 0;
background-size:
10px 10px,
10px 10px;
background-repeat: no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>希望能帮助到你!
小智 -3
我在同一个 Bootstrap 4 上找到了答案
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>链接： https: //v4-alpha.getbootstrap.com/components/forms/#select-menu
不管怎样，谢谢你的帮助
- 对于帮助定位插入符来说不是很有用。 (2认同)
| 归档时间： |
|
| 查看次数： |
9537 次 |
| 最近记录： |