0

选择框箭头未正确对齐 - 单独使用 Google Chrome。

我使用了 CSS3 功能 - 链接下方的参考

http://cssdeck.com/labs/styling-select-box-with-css3

Firefox 和 IE 运行良好

HTML 代码

<div id="cnt">

    <!-- form start here -->
    <form class="ffm">

        <!-- Find a course title pod start here -->
        <div class="fo">
            <h3>Find a course</h3>

            <!-- back button start here -->
            <a class="bbtn frn" href="javascript:void(0);">Back</a>
            <!-- back button end here -->


        </div>
        <!-- Find a course title pod end here -->


        <!-- ENTRY POINTS start here -->
        <div class="fo mb36">
            <label for="entry">ENTRY POINTS</label>
            <span class="sbx">
            <select name="entry">
                <option>A-levels</option>
                <option>B-levels</option>
                <option>C-levels</option>
                <option>D-levels</option>
            </select>
            </span>
        </div>
        <!-- ENTRY POINTS end here -->


        <!-- Your grades / Expected grades start here -->
        <div class="fo">
            <label for="grads">Your grades / Expected grades</label>
            <div class="fl">

                <!-- A* select box start here -->
                <span class="sbx gs">
                    <select name="a">
                        <option>A*</option>
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </span> 
                <!-- A* select box end here -->


                <!-- B select box start here -->
                <span class="sbx gs">
                    <select name="b">
                        <option>B</option>
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </span>
                <!-- B select box end here -->


                <!-- D select box start here -->
                <span class="sbx gs">
                    <select name="d" class="mb20">
                        <option>D</option>
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </span>
                <!-- D select box en here -->

            </div>
            <div class="fr">

                <!-- A select box start here -->
                <span class="sbx gs">
                    <select name="aa">
                        <option>A</option>
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </span>
                <!-- A select box end here -->  

                <!-- C select box start here -->
                <span class="sbx gs">
                    <select name="c">
                        <option>C</option>
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </span>
                <!-- C select box end here -->  

                <!-- E select box start here -->
                <span class="sbx gs">
                    <select name="e" class="mb20">
                        <option>E</option>
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </span>
                <!-- E select box end here -->  

            </div>




        </div>
        <!-- Your grades / Expected grades end here -->


        <!-- subject start here -->
        <div class="fo">
            <label>Subject</label>
            <span class="sbx">
                <select name="subject">
                    <option>All economics subjects</option>
                    <option>Economics</option>
                    <option>Business</option>
                    <option>Economics subject</option>
                    <option>Economics subject</option>
                </select>
            </span>
        </div>
        <!-- subject end here -->


        <!-- Course Type start here -->
        <div class="fo">
            <label>Course Type</label>
            <span class="sbx">
                <select name="course">
                    <option>All course types</option>
                    <option>MBA</option>
                    <option>Business management</option>
                    <option>Arts</option>
                    <option>Agriculture and related</option>
                </select>
            </span>
        </div>
        <!-- Course Type end here -->

        <!-- Location start here -->
        <div class="fo">
            <label>Location</label>
            <span class="sbx">
                <select>
                    <option>Anywhere</option>
                    <option>East Anglia</option>
                    <option>North East England</option>
                    <option>West Midlands</option>
                </select>
            </span>
        </div>
        <!-- Location end here -->

        <!-- button pod start here -->
        <div class="fo mb10">

            <div class="fl">
            <!-- Reset button start here -->
            <a class="bbtn rsb" href="javascript:void(0);">Reset</a>
            <!-- Reset button end here -->
            </div>


            <div class="fr">
            <!-- find courses button start here -->
            <input type="button" class="fcbtn" value="Find courses" />
            <!-- find courses button end here -->
            </div>

        </div>
        <!-- button pod end here -->

    </form>
    <!-- form end here -->

</div>

CSS 代码

html,body,form,div,p,ul,ol,h1,h2,h3{padding:0;margin:0;}
img,a{outline:0;border:0;text-decoration:none;}
ul,ol{list-style:none;}
body{font-family:arial,helveltica,serif;font-size:100%;}
#cnt{width:auto;padding:20px;overflow:hidden;background:#dfdfdf;}
h3{
font-size:18px;
color:#5e5e61;
float:left;
}
.fo{
clear:both;
margin-bottom:20px;
}
.bbtn,.fcbtn{
font-size:15px;
font-weight:bold;
color:#fff;
background:#bfbfc0;
padding:10px 20px;
text-align:center;
border-radius:5px;
box-shadow:0 2px 0 0 #868686;
border:0;
}
.bbtn:hover{
background:#aaa;
}
.fcbtn{
background:#00b26d;
width:100%;
cursor:pointer;
padding:9px 20px 10px;
}
.fcbtn:hover{
background:#01a163;
}
.rsb{
width:70%;
display:block;
}
.frn{float:right !important;}
.fo label{
display:block;
font-size:11px;
color:#6d6c70;
text-transform:uppercase;
padding-bottom:10px;
}
.fo select{
font-size:13px;
font-weight:bold;
color:#6d6c70;
padding:15px;
width:100%;
border-radius:5px;
border:0;
}
.gs select{
margin-bottom:4%;
}
.mb20{
margin-bottom:20px !important;
}
.mb36{
margin-bottom:36px;
}
.mt10{
margin-top:10px;
}
.fl{
width:49%;
float:left;
}
.fr{
width:49%;
float:right;
}
/*firefox hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}
.sbx {position:relative}
.sbx:after {
content:'>';
font:bold 25px "Consolas", monospace;
color:#b6b5b7;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:18px; 
top:-5px;
padding:0 0 2px;
position:absolute;
pointer-events:none;
}
.sbx:before {
content:'';
right:15px; top:0px;
width:42px; height:20px;
background:#fff;
position:absolute;
pointer-events:none;
display:block;
}

请检查

http://jsfiddle.net/anglimass/gtxHh/

谢谢提前

4

2 回答 2

1

我认为您不应该尝试通过覆盖内容来设置本机选择框的样式。这会中断，因为原生 UI 元素的布局和尺寸超出您的能力范围（请参阅移动设备、电视浏览器等）

您可以尝试一些现有的选择框自定义实现，例如。http://jquery-plugins.net/tag/custom-select，如果样式至关重要。

于 2013-07-19T08:27:39.687 回答
0

我修复了重叠问题。将每个选择框的一个块元素放在外面。

html代码：

<p>
<span class="sbx gs">
<select name="a">
<option>A*</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span> 
</p>
于 2013-07-19T12:35:34.187 回答