javascript - 如何在 mozilla 浏览器的 Select around arrow 中删除边框和箭头

Question

我在我的 HTML 中使用了 select 它适用于其他浏览器，但我在 Mozilla 浏览器中的 select 中的箭头周围出现了一个带边框的框有办法解决吗？？我不希望它周围有这样的边界只是箭头。这是 fiddle 的链接 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 包含在 fiddle 中。谢谢你

Answer 1

你可以添加这个:-moz-appearance:none;

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>