css\html

Hello,
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:

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

Thanks
LVL 1
Moti Mashiah.NET DeveloperAsked:
Who is Participating?
 
Julian HansenCommented:
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
http://selectric.js.org/demo.html
https://silviomoreto.github.io/bootstrap-select/
Many more examples here
https://www.jqueryscript.net/tags.php?/Drop%20Down/

You would need to see which one best matches your needs.
0
 
Leonidas DosasCommented:
CSS:
 .Shapedropdown { 
 margin-left: 25px;
 margin-top: 7%;
  width: 80px;
  border:0px;
  outline:0px;
}

Open in new window

0
 
Slick812Commented:
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?
0
 
Moti Mashiah.NET DeveloperAuthor Commented:
Thank you for your help guys. the issue was in zeplin designer as it doesn't send the right CSS.

Thank you again.
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.