Moti Mashiah
Moti Mashiah used Ask the Experts™
I got my CSS design from my designer guy who post it on Zaplin.io please see code below:

.Rectangle {
  width: 118px;
  height: 36px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 1px 2px 4px 0 #e6e6e6;
  border: solid 1px #e6eaee;

.Today {
  width: 49px;
  height: 20px;
  font-family: PTSans;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-align: left;
  color: #4a4a4a;
.Shape {
  width: 24px;
  height: 24px;

.Shape {
  width: 10px;
  height: 5px;
  background-color: #000000;

Open in new window

The result suppose to be like in zaplin which is:

Please, can somebody help with the html mokup.
Note: I have to use this CSS classes to accomplish my goal.

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017
 .Shapedropdown { 
 margin-left: 25px;
 margin-top: 7%;
  width: 80px;

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Styling select boxes is not straightforward as each browser treats them differently.

What you would probably need to do is look at a dropdown plugin that renders the select as an <ul> or <div> based list and manages the synchronisation with the actual control.

Some examples
Many more examples here

You would need to see which one best matches your needs.
greetings Moti Mashiah, , I do not understand what you need to help you with this question of -
     "can somebody help with the html mokup"

I looked at the CSS you gave for 4 classes, and I see that the .Rectangle gives the box-shadow and width and border-radius I see in the image, but the   .Today    sets a width to 49px for the <select> (I guess), which does not seem to be wide enough to show the <option> "Today"  text ? ?, and the   .Shape   will just be a small black rectangle.

I do not see any way to set up an HTML structure with <div> and <select> (or any other elements) that does what the image has with the unchangeable CSS you have? ? ?

Can you tell us what there is to work with - as what you can change - in the CSS and the <div> <select> structures? ?

I do not know what to suggest with the info you have?
Moti Mashiah.NET Developer


Thank you for your help guys. the issue was in zeplin designer as it doesn't send the right CSS.

Thank you again.
Most Valuable Expert 2017
Distinguished Expert 2018

You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial