gpt4 book ai didi

html - 更改选择插入符设计

转载 作者:可可西里 更新时间:2023-11-01 13:44:25 27 4
gpt4 key购买 nike

我在更改选择元素中插入符的设计时遇到问题。我制作了选择元素,但插入符号设计不一样。

是否可以更改插入符号的设计?

这是设计:

enter image description here

这是我的代码:

.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/

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