---- AI试用 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

Style a Select Box Using Only CSS

前端开发 蚂蚁 2102℃ 0评论

I often have to use a select box when I’m putting together a custom form that requires a drop down list. It took me a while to figure out how to easily style the select box using only CSS since certain parts are browser specific, such as the drop down arrow.

Here is how a select box will look by default:

This is the HTML code:

   <option>Here is the first option</option>
   <option>The second option</option>

There are certain elements of a select box that we can style such as the font, border, color, padding and background color:

But that annoying drop down arrow always stays the same. There is no direct way to do style it, but the workaround is pretty simple.

First we need to surround our select box element with a div container:

<div class="styled-select">
      <option>Here is the first option</option>
      <option>The second option</option>

Next we need to add a bit of CSS to make sure that the elements of the select box are styled a certain way:

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;

We need to make sure that our select box actually spans wider than the surrounding div container so that the default drop down arrow disappears.

This is the new drop down arrow I want to use:

Our div container needs to be styled like so in order for the new arrow to appear where we want it to:

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
   border: 1px solid #ccc;

Our select box should now look like this:

Knowing this little workaround will make it a whole lot easier to style your select box exactly how you want it to be styled using nothing but CSS.


转载请注明:有爱前端 » Style a Select Box Using Only CSS

喜欢 (0)or分享 (0)