CODEWITHSUNDEEP
htmlcss
nanobots
nanobots

Reputation: 457

apply the :focus on child element when parent selected css3

I have a label and drop down list behind it

it goes something like this :

    <div class="=row dropdown" id="conTypeSelect" >
        <label id="connectTypeLabel" class="label">Connector Type</label>
        <select id="connecType" name="connecType" class="dropdownList" >
            <option>type1</option>
            <option>type2</option>
        </select>
    </div>

I want it so when clicking on the element to make the label change color to blue. I know how to do it through a script by trigger off event on select and add css to the label to set it blue.

However I am wondering if there is a way to do it simply through css. Using script seem to make my code alot more messy for things like this.

So I thought of adding css to the parent and make it 

.dropdown:focus {
color: #1A98C6;
}
.label:focus {
    color: #1A98C6;
}
.dropdownList:focus {
    border-bottom: solid 1px #1A98C6;
    border-right: solid 1px #1A98C6;
    outline: none;
}

however applying this to parent div doesn't seem to apply to child. is there a way to make it so when I focus the parent the child would get focused too with css?

I have attempted to use this as the css but it doesn't seem to work:

.dropdown:focus .label {
color: #1A98C6;
}

.dropdown:focus .dropdownList {
border-bottom: solid 1px #1A98C6;
border-right: solid 1px #1A98C6;
outline: none;
}

Upvotes: 3

Views: 4632

Answers (2)

Jones Joseph
Jones Joseph

Reputation: 4938

You can achieve this by a + selector and putting the label after the select, so that you can do something like
.dropdown select:focus + label to select the label after the focused select box.
And use float:left on the label and a bit of right margin to pull the lable to the left of the select box.

.dropdown>select+label {
  float: left;
  margin-right: 10px;
}

.dropdown>select:focus+label {
  color: #1A98C6;
  float: left;
  margin-right: 10px;
}

.dropdown>select:focus {
  border-bottom: solid 1px #1A98C6;
  border-right: solid 1px #1A98C6;
  outline: none;
  background: blue;
  color: white;
}
<div class="=row dropdown" id="conTypeSelect">

  <select id="connecType" name="connecType" class="dropdownList">
            <option>type1</option>
            <option>type2</option>
        </select>
  <label id="connectTypeLabel" class="label">Connector Type</label>
</div>

NOTE: I just added a background and color on select too just to show it effects the select too when focused.

Upvotes: 1

noob
noob

Reputation: 490

This is the only way I can think of using CSS only to trigger by clicking the <input type="checkbox">.

body {
    font-family: Arial;
    font-size: 13px;
}

input[type=checkbox]{
    display: none;
}

ul{
    display: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0;
    width: 100px;
}

ul li {
  border-bottom: 1px solid #eee;
  cursor: pointer;
  line-height: 30px;
  list-style: none;
  text-align: center;
  
}

ul li:hover {
  background-color: #333;
  color: #fff;
}

input[type=checkbox]:checked ~ ul {
    display: block
}
<div class="dropdown" id="conTypeSelect">
    <input type="checkbox" id="checkbox_toggle">
    <label for="checkbox_toggle">Click to choose Connector Type</label>
    <ul>
        <li>type1</li>
        <li>type2</li>
    </ul>
</div>

Upvotes: 0

Related Questions