纯CSS选择菜单/下拉菜单:如何制作自定义右箭头？

要制作一个自定义右箭头的纯CSS选择菜单/下拉菜单，可以使用以下步骤：

首先，创建一个HTML文件，并在其中添加一个<select>元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Custom Arrow Select Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <select class="custom-select">
       <option value="option1">Option 1</option>
       <option value="option2">Option 2</option>
       <option value="option3">Option 3</option>
    </select>
</body>
</html>

接下来，创建一个名为styles.css的CSS文件，并在其中添加以下代码：

.custom-select {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-family: Arial, sans-serif;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 5px 30px 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.custom-select:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #333333;
    pointer-events: none;
}

.custom-select:hover {
    background-color: #f5f5f5;
}

.custom-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

这段代码将创建一个自定义右箭头的下拉菜单。在这里，我们使用了伪元素:after来创建一个自定义箭头，并使用border属性来定义箭头的形状。