Search code examples
csshtmlformswebshim

Styling arrow on webshim validation bubble

I'm trying to set a fill color of #333 for the arrow on webshim's HTML5 form validation bubble, but I can't seem to identify the correct class.

My CSS so far:

.ws-po-box {
    padding: 10px;
    /* border: 1px solid red; */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #333;
    -webkit-box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
    box-shadow: 0 2px 6px -4px rgba(0,0,0,0.3);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.1pt;
}

.ws-po-arrow {
    /* border-bottom: .61538em solid red; */
}

Fiddle: http://jsfiddle.net/zhwdbhdd/.

Any help would be appreciated!

Solution

  • Looks like arrow CSS is contained in ws-po-arrowbox class.

    <div class="ws-po-arrow">
  <div class="ws-po-arrowbox"></div>
</div>

    Arrows color is not a background-color, but a border color, since the arrow is made with borders. So add this CSS

    .ws-po-arrowbox{
    border-bottom-color:red!important;
}

    I updated your fiddle to demonstrate: http://jsfiddle.net/zhwdbhdd/1/