Form Test

by mikeskinner

HTML

<form class="yform">
  <input type="text" class="input-error" placeholder="Email">
  <span aria-hidden="true" style="width: 18px; height: 18px;" class="icon icon--18-warning icon--size-18 icon--error">
    <svg role="img" class="icon_svg">
      <use xlink:href="#18x18_warning" />
    </svg>
  </span>
  <p class="text-error validator-feedback--inline">Please provide a valid email address</p>
</form>

CSS

.icon--error, .icon--hover-error:focus, .icon--hover-error:hover {
    fill: #d32323;
}

.input-error {
    display: -moz-inline-stack;
    display: inline-block;
    padding-right: 27px;
    margin-right: -27px
}

.icon-svg-unavailable .icon:before,
.no-js .icon:before {
    background-image: url(https://s3-media1.fl.yelpcdn.com/assets/srv0/svg_icons/469b7aef2c95/assets/sprite.png)
}

.icon_svg {
    fill: inherit;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.icon_svg {
    position: absolute;
    width: 100%;
    height: 100%
}
.icon--18-warning:before {
    top: -4254px;
}

.icon.icon--size-18 {
    margin: -9px 0
}
/*
.validator-feedback--inline {
    margin: -12px 0 18px
}
*/
.text-error {
    color: #d32323
}


.text-error-inline {
    margin: -12px 0 18px
}