/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 7
   Review Assignment

   Customer Information Validation Style Sheet
   Author: William Hamm
   Date:   10/22/2024

   Filename: rb_validate.css

*/


/* Validation Styles */

/* 1. Input, select, and textarea elements with focus */
input:focus, select:focus, textarea:focus {
   background-color: rgb(255, 255, 180);
}

/* 2. nameBox and phoneBox with valid data and focus */
#nameBox:focus:valid, #phoneBox:focus:valid {
   background-color: rgb(220, 255, 220);
   background-image: url('rb_okay.png');
   background-repeat: no-repeat;
   background-position: right;
   background-size: contain;
}

/* 3. nameBox and phoneBox with invalid data and focus */
#nameBox:focus:invalid, #phoneBox:focus:invalid {
   background-color: rgb(255, 230, 230);
   background-image: url('rb_warning.png');
   background-repeat: no-repeat;
   background-position: right;
   background-size: contain;
}