Question

I have a custom button implemented as an anchor. The button has an image and text.

When the button has focus, I would like to style it differently. Specifically, I would like to draw a dotted rectangle around the image and text. I would also would like to additionally style it based on another class.

Here’s the button code:

<a id="searchButton" class="button" href="#">
    <span class="icon-search"></span>
    Search
</a>   

Here’s the CSS code with my questions:

button:focus {
/*How do I make a rectangular dotted line around the button text and icon? /*
/* How do I refer to another class that has additional stylings? */
}

Answer 1

You have “button” but it should be “.button” instead since your tag is not a button, but rather your class.

.button:focus {
  outline: #00FF00 dotted thick;
}

In regards to the question, “How do I refer to another class that has additional stylings?”, I believe you would need a library like SASS, LESS or some other dynamic stylesheet language because that type of functionality is not currently supported by CSS natively.