How to target a value?

Question

I want to target the any date selection box but can't seem to find the right selector. It's a value "Any Date".

my code:

label[for="searchdatetimes"] {
  border-radius: 20px;
}

!-- Search by date section start -->
<div class="col-sm-4">
  <label for="search_datetimes">Any dates</label>
  <select name="search_datetimes[]" id="search_datetimes" class="event-manager-category- 
    dropdown" data-placeholder="Choose any date…" data- no_results_text="No results match" data- multiple_text="Select Some Options">
    <option value="">Any Date</option>
    <option value="datetime_today">Today</option>
    <option value="datetime_tomorrow">Tomorrow</option>
    <option value="datetime_thisweek">This Week</option>
    <option value="datetime_thisweekend">This Weekend
    </option>
    <option value="datetime_thismonth">This Month
    </option>
    <option value="datetime_thisyear">This Year</option>
    <option value="datetime_nextweek">Next Week
    </option>
    <option value="datetime_nextweekend">Next Weekend
    </option>
    <option value="datetime_nextmonth">Next Month
    </option>
    <option value="datetime_nextyear">Next Year</option>.
  </select>
</div>
!-- Search by date section end --
</div>
<!-- /row -->
<div class="row">
  <!--

Page is: https://adsler.co.uk/find-an-event/

I want to target the drop down box any date

Tried this too.

a [target~="Any Date"] {
background-color: yellow;
border-radius: 20px;
border: 3px #000 solid;}

Nothing.

Why are you trying to set a border-radius without setting a visible border, background colour, or anything else that would make the border show? — Quentin, May 03 '19 at 10:03
@user11446526 as you can see it works as expected: https://codepen.io/anon/pen/rbXXqV (of course as suggested before, you should define a border in order to see the border-radius) — Fabrizio Calderan, May 03 '19 at 10:55
@fcaldetan. Oh sorry, I want to target the box.... `any date` — user11446526, May 03 '19 at 11:14
So what you're looking to target is this line: `'? Or the whole selection box? — Christopher Bennett, May 03 '19 at 12:03
@Quentin trying to target value. Please see updated question. — user11446526, May 03 '19 at 12:04
@Christopher Bennet the whole selection box to make it have a border-radius please.... — user11446526, May 03 '19 at 12:06

Christopher Bennett · Accepted Answer · 2019-05-03T12:14:15.903

0

Add

select{
  border-radius: 20px;
}

To your CSS

So, to better answer your initial question, the "Selector" you were trying to target was, appropriately, in this case, select.

You could also do it by id #search_datetimes if you needed to target just that element (if there are others).

edited May 03 '19 at 12:14

answered May 03 '19 at 12:08

Christopher Bennett

803
1
8
20

You can also add `outline: none;` to get rid of that ugly blue outline when you select the box (because the outline doesn't accept the curved radius). – Christopher Bennett May 03 '19 at 12:18

How to target a value?

1 Answers1