gpt4 book ai didi

javascript - 如何编辑选择表单箭头? ( Bootstrap 4)

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:21:39 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 4 处理一个表单,我想将箭头选择元素的样式从第一个版本编辑/更改为第二个版本,如下所示。

enter image description here

我尝试了不同的方式(正如在这个社区中看到的需要引用)来编辑箭头,但我没有成功。

谁能帮我解释一下我如何才能达到预期的结果?

请在下面找到我的问题的 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>

最佳答案

只是一个例子。您可以将其用作引用。

在本例中,您将学习自定义选择框的方法。但是,以我的经验。旧浏览器不支持此方法。

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>

希望对您有所帮助!

关于javascript - 如何编辑选择表单箭头? ( Bootstrap 4),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42363405/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com