Home/ Questions/Q 8068299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T12:37:34+00:00

I want to add css3 box shadow for a select box. It works in

  • 0

I want to add css3 box shadow for a select box. It works in all browsers except Google chrome. Since I am wrapping form elements by p tags I can’t wrap select tags by div tags (Since div inside p is not allowed in HTML). Is there any other way to apply box shadow for select boxes in Google chrome?

HTML page

<form method="post">
 <p>
   <label for"option_box"">Title:</label>

    <select name="option_box">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>

 </p>

CSS

select {
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1) Add following lines to css file

    .shadow_select {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.shadow_select:focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

    2) Then apply shadow_select class for select tags

    <select class="shadow_slect">
     <option>AAAAA</option>
     <option>BBBBB</option>
     <option>CCCCC</option> 
</select>

    This works on all other browsers except webkit. for webkit wrap select using div. Then use jquery to detect focus event on select and apply CSS shadow class to that div. (Because focus event can’t be applied to a div)

    • 0