how to make the style of select option like this style?

Question

hello i have this photo : enter image description here

i want to make a select option with the same style

 <div class="name"> <input class="input1"type="name" required> <label class="label1">First name</label> </div>

.label1{ position: relative; color: #555; font-size: 15px; pointer-events: none; right: 15px; top: -28px; transition: .2s all; } .input1:focus ~.label1, .input1:valid ~ .label1{ top: -49px; right: 9px; background: #fff; padding: 0 5px; font-size: 10px; color: #1f52f9; } .input1{ outline: none; border: 1px solid #9c9c9c; border-radius: 5px; padding: 0 10px; height: 35px; font-size: 15px; } .input1:focus{ border: 1.5px solid #1f52f9; } .input1[type="name"]{ display: block; margin: 30px 0 0 10px; } .input1[type="username"]{ display: block; width: 390px; margin: 10px 0 0 10px; } .input1[type="submit"]{ background: #4971f6; color: #fff; border: none; padding:10px 30px; border-radius: 5px; margin: 40px 0 30px 180px; cursor: pointer; font-size: 15px; } .input1[type="submit"]:hover{ background: #254fdb; }

so i want to make with the same style which mean when i press inside the select (the placeholder moving to the border and then opens the options)

Nixit Ahir · Accepted Answer · 2022-06-29 17:44:20Z

I made some changes to class name only to make this answer general.
Here selection for label is done by + selector,.field .input:focus+.label .field .input:active+.label. focus and active are two states for input. For more information about visit plus selector.
We set field to positon:relative and made label positon:absolute. By seeting other cs for backgroubd-color and top, right we can achieve it easily.

.field { position: relative; display: inline-block; margin: 10px 0; } .field .input { line-height: 20px; background: transparent; position: relative; text-align: right; border-radius: 4px; } .field .input:focus, .input:active { border-color: blue; outline: blue; line-height: 28px; } .field .label { position: absolute; right: 2px; z-index: -1; } .field .input:focus+.label, .field .input:active+.label { z-index: 1; background-color: white; color: blue; top: -8px; padding: 0 4px; }

<div class="field"> <input class="input" type="name" required> <label class="label">First name</label> </div>

@AysarSAlawwad, this works for select also you just need to adjust sizing and padding.

Hamza Murtaza · Accepted Answer · 2022-06-29 16:31:28Z

Firstly, there are a ton of libraries which you can choose from, that provide such ready-to-use components/elements. Secondly, if you need to open a dropdown, then you should have a look at <select> tag in html, in which you can provide multiple <option> tags, which a user can choose from.

Collectives™ on Stack Overflow

how to make the style of select option like this style?

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related