Style the label of a select box when select box is hovered?

You will need to use the :focus pseudo class to achieve your affect. Also you coded your html wrong, it should be:

<select id="blah">
 <option>all up in here</option>
</select>
<label for="blah">Size</label>

I placed the label after the select element because I don't know how to select an element before another one.

select:focus + label{
 color: red;
}

The :focus pseudo class targets an element that is activated by your mouse or keyboard. The + signifies an immediate sibling of the select element which is why I dropped the label element below the select element. If you want it the other way around I'm sure you can make it so by using the float css property.

Try something like this:

<select id="blah">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
        <label id="label" for="blah">Size</label>

both elements need to be inside the same parent element. At this stage the label needs to come after the select element due to the + selector we are going to use.

Your css should be something like this

#label{
    float:left;
}
#blah:hover + #label{
    color:red;
}

Now depending on your remaining code, you might need to adjust the css. The float:left will put your label on the left of the select element. If this solution does not do it for you, you can try using jquery.

Edit: I misread the question. I have updated the pen and posted another answer elsewhere in this thread.

It's as simple as increasing the font-size on the select, but there will be aesthetic issues and possible breakage of your layout.

I have created a working example on Codepen.io for you to see some options to use to minimize layout issues and some aesthetics.

The code is below as well for the lazy ;-p

<div>
  <label id="sizeme-label" for="sizeme">Size:</label>
  <select id="sizeme">
    <option>Woah</option>
  </select>
</div>

/* container */
div {
  width: 8em;
  height: 2em;
  margin: 1em;
}

#sizeme-label {
 margin-right: 0.15em;
 margin-top: 0.1em;
 /* the following is a hack so the label does not move */
 float: left;
}

#sizeme {
  width: 5em;
  height: 1.3em;
}

/* including :active here so snap back
 * won't happen until mouse is moved
 */
#sizeme:hover,
#sizeme:active {
  font-size: 1.25em;
}

After playing around with the advice given above and other random attempts, I went ahead and used a cheap 'fix' of sorts. I surrounded the label/select pair in their own divs and then using a child selector to target the label within the div when it is being hovered.