我在我的HTML中使用了select适用于其他浏览器，但我在我的箭头里面有一个带边框的选择在Mozilla浏览器中 有什么办法解决这个问题？我不希望这样的边界只是箭头。 这是指向小提琴https://jsfiddle.net/0zh3fa97/
的链接HTML
<section class="quote-testimonail">
<div class="container">
<div class="row">
<!-- Quotes Section Begins-->
<div class="quote col-sm-6 col-md-6">
<h4 class="section-heading">quick quote</h4>
<div class="form-group clearfix col-sm-6 pad-0" style="margin-bottom: 20px">
<select class="form-control">
<option data-display="Fright Type">Air Frieght</option>
<option value="1">Road Frieght</option>
<option value="2">Ship Frieght</option>
<option value="3">Rail Frieght</option>
</select>
</div>
<div class="form-group col-sm-6 npr res-pad-0">
<label class="sr-only">Weight</label>
<input type="text" class="form-control" placeholder="Weight">
</div>
<div class="form-group col-sm-6 pad-0">
<label class="sr-only">Departure</label>
<input type="text" class="form-control" placeholder="Departure">
</div>
<div class="form-group col-sm-6 npr res-pad-0">
<label class="sr-only">Destination</label>
<input type="text" class="form-control" placeholder="Destination">
</div>
<div class="form-group">
<label class="sr-only">Email</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<button class="btn">submit</button>
</div>
<!-- Quotes Secvtion Ends-->
<!--TEstimonial Section Begins-->
<div class="testimonial col-sm-6 col-md-6 npr">
<h4 class="section-heading">WHAT PEOPLE SAYS</h4>
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="testimonial-section">
<i>Omnes platonem nam eu, ne lorem habemus eloquentiam cum, nam ex impetus voluptaria. Ut saepe conclusionemque his, vel veritus antiopam at. Eu errem lobortis complectitur has.</i>
</div>
<div class="testimonial-section-name clearfix">
<img width="70" height="70" src="../img/profile-img.jpg" alt="profile" class="img-circle pull-left">
<div class="client-name">
<h4>Steve jhonson</h4>
<p>CEO,Ark foundation</p><p>
</p></div>
</div>
</div>
<div class="item">
<div class="testimonial-section">
<i>Omnes platonem nam eu, ne lorem habemus eloquentiam cum, nam ex impetus voluptaria. Ut saepe conclusionemque his, vel veritus antiopam at. Eu errem lobortis complectitur has.</i>
</div>
<div class="testimonial-section-name clearfix">
<img width="70" height="70" src="../img/profile-img.jpg" alt="profile" class="img-circle pull-left">
<div class="client-name">
<h4>Steve jhonson</h4>
<p>CEO,Ark foundation</p><p>
</p></div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonial Section ends-->
</div>
</div>
</section>
CSS
/*Quotes and testimonial CSS*/
.quote-testimonail{
padding: 100px 0;
background-color: #191c30;
position: relative;
}
.quote-testimonail:after{
content: '';
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
padding-left: 25px;
background-image: url("../img/testimonial-bg.jpg");
background-position: center center;
background-size: cover;
}
.quote-testimonail h4.section-heading{
color: #fff;
}
/*Quote CSS*/
.quote-testimonail .quote .form-group{
margin-bottom: 20px;
}
.quote-testimonail .quote .form-group .form-control{
border-radius: 0;
height: 50px;
color: #7d7d7d;
}
.quote-testimonail .quote .btn{
height: 50px;
width:180px;
font-family: "arimo";
font-weight: 700;
font-size: 14px;
border-radius: 0;
border: none;
text-transform: uppercase;
}
.quote-testimonail .container{
margin: auto;
padding: 0 15px;
}
.quote-testimonail .container .row{
margin-left: -15px;
margin-right: -15px;
}
.quote-testimonail .quote{
padding-right: 30px;
margin-bottom: 20px;
}
.quote-testimonail .quote h4{
font-family: "arimo";
font-size: 24px;
font-weight: bold;
padding-bottom: 45px;
}
/*Testimonial CSS*/
.quote-testimonail .testimonial{
padding-left: 30px;
z-index: 1;
}
.quote-testimonail .testimonial .carousel-inner .item .testimonial-section{
height: auto;
padding: 35px 35px 55px 35px;
position: relative;
font-size: 20px;
color: #fff;
font-family: inherit;
font-weight: 300;
border: 2px solid #fff;
margin-right: 20px;
}
.quote-testimonail .testimonial .carousel-inner .item .testimonial-section-name{
text-align: left;
color: #fff;
margin-top: 15px;
}
.quote-testimonail .testimonial .carousel-inner .item .testimonial-section-name img{
height: 70px;
width: 70px;
margin-top: 15px;
margin-right: 30px;
}
.quote-testimonail .testimonial .carousel-inner .item .testimonial-section-name .client-name{
margin-top: 10px;
color: #fff;
text-transform: uppercase;
font-family: "arimo";
}
.quote-testimonail .testimonial .carousel-inner .item .testimonial-section-name .client-name h4{
font-size: 18px;
padding-bottom: 5px;
}
请注意：我已将外部URI包含在小提琴中。 谢谢
答案 0 :(得分：2)
您可以添加以下内容： 的 -moz-外观：无;
select.form-control {
-moz-appearance:none;
-webkit-appearance: none;
appearance:none;
background-image: url('https://maxcdn.icons8.com/Share/icon/Arrows//expand_arrow1600.png');
background-repeat: no-repeat;
background-size:15px;
background-position: right center;
}
select{
width:150px;
}<select class="form-control css-select">
<option data-display="Fright Type">Air Frieght</option>
<option value="1">Road Frieght</option>
<option value="2">Ship Frieght</option>
<option value="3">Rail Frieght</option>
</select>
答案 1 :(得分：0)
如果您正在谈论蓝色边框，可以试试这个：
.form-control {
border: 0;
box-shadow: none !important;
}
答案 2 :(得分：0)
尝试在此代码之前删除浏览器外观
.your-class{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
答案 3 :(得分：0)
那必须是shadowDOM，here类似的问题可能会给出一些解释。