我在更改选择元素中插入符的设计时遇到问题。 我制作了选择元素，但插入符号设计不一样。
是否可以更改插入符号的设计？
这是设计:
这是我的代码:
.sub_domain {
position: relative;
margin: 20px;
}
.sub_domain input {
border: 1px solid #e1e1e1;
box-shadow: none;
border-radius: 20px;
padding-right: 94px;
padding-left: 20px;
}
.sub_domain_select {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.sub_domain_select select {
border: none;
height: 100%;
outline: 0;
width: 95px;
padding: 6px 0 6px 10px;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
background: #8cc44c;
}
.sub_domain_select select {
color: #fff;
}
.sub_domain input {
border: 1px solid #e1e1e1;
box-shadow: none;
border-radius: 20px;
padding-right: 94px;
padding-left: 20px;
} <head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="sub_domain">
<input type="text" name="domain_name" placeholder="Domain name" class="form-control" maxlength="20" />
<div class="sub_domain_select">
<select name="domain_zone">
<option value="com">.com</option>
<option value="net">.net</option>
<option value="info">.info</option>
<option value="org">.org</option>
</select>
</div>
</div>
</body>如有任何帮助，我们将不胜感激!
最佳答案
试试这个:
我更改了 .sub_domain_select select 类。我只是删除插入符 apperance: none; 并添加图像文件而不是。
.sub_domain_select select {
cursor: pointer;
color: #fff;
border: none;
height: 100%;
outline: 0;
width: 75px;
position: absolute;
top: 0;
right: 0;
padding: 6px 0 6px 10px;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
-moz-appearance: none;
-webkit-appearance: none;
apperance: none;
background: #8cc44c url(https://image.ibb.co/noEFC6/arrow.png) 74% / 13% no-repeat;
}
.sub_domain {
position: relative;
margin: 20px;
}
.sub_domain input {
border: 1px solid #e1e1e1;
box-shadow: none;
border-radius: 20px;
padding-right: 94px;
padding-left: 20px;
}
.sub_domain_select {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.sub_domain_select select {
cursor: pointer;
color: #fff;
border: none;
height: 100%;
outline: 0;
width: 75px;
position: absolute;
top: 0;
right: 0;
padding: 6px 0 6px 10px;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
-moz-appearance: none;
-webkit-appearance: none;
apperance: none;
background: #8cc44c url(https://image.ibb.co/noEFC6/arrow.png) 74% / 13% no-repeat;
}
.sub_domain input {
border: 1px solid #e1e1e1;
box-shadow: none;
border-radius: 20px;
padding-right: 94px;
padding-left: 20px;
}<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="sub_domain">
<input type="text" name="domain_name" placeholder="Domain name" class="form-control" maxlength="20" />
<div class="sub_domain_select">
<select name="domain_zone">
<option value="com">.com</option>
<option value="net">.net</option>
<option value="info">.info</option>
<option value="org">.org</option>
</select>
</div>
</div>
</body>关于html - 更改选择插入符设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47829329/