Add text before select element

Question

So i sm working on a application, where i need to have a select element with this text: 'sort element by option' where option is the option selected inside the select element, the select element should have always the sort element by text, i tried to add a before element but it didn't work. I also tried to add it to options tag. It worked but i don't want the 'sort element by option' text inside the opened select. Inside i just want the value.

So i have this at the moment:

<select>
  <option>option</option>
</select>

select::before {
 content: 'Sort element by'
 color: black 
}

i am searching a html/css solution, any help would be appreciate :)

Have you read something about HTML at all? – xAqweRx Aug 13 '18 at 12:01 — xAqweRx, Aug 13 '18 at 12:01
do your answer help to this topic? – af costa Aug 13 '18 at 12:10 — af costa, Aug 13 '18 at 12:10

score 1 · Answer 1 · answered Aug 13 '18 at 12:12

1

.option-select {
  display: inline;
}

.option-select:before {
  content: 'Sort element by';
  color: black;
}

<div class="option-select">
  <select>
    <option>option</option>
  </select>
</div>

Provided you have access to the HTML you could do something like this. However, if you want to change the values based on the selected option then you have to use Javascript.

answered Aug 13 '18 at 12:12

ConsoleLog

501
3
12

1

hi ConsoleLog, the thing here is that you can't prompt native select when you click on sort element by, because it is not part of the select element, but the parent :/ – af costa Aug 13 '18 at 18:11

Add text before select element

1 Answers1