I have search but can not find a proper answer.
I have my form done but I'd like to add some sex appeal. For starters I'd like to add CSS so that when each field is clicked on the border around it turns colour. For example, user clicks on the field named 'phone' and a blue highlighted glowing border would appear.
Can someone point me in the right direction for this.
Thanks
site: http://vancouverrealestate.ca/find-a-real-estate-agent
This should do the trick for you, just place it in your theme's style sheet. You can obviously add more styles to the declaration other than the border-color if you want.
[css]
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
border-color: #ff0;
}Thanks Rob.
I changed the colour to blue and see that the border is a thin solid line. How do I change it to have a glowing effect?
See this effect on many forms where the container 'glows'. For lack of a better example see hotmail.com main login page. Is it a border radius I'd play with?
thanks again.
You'd want to use box-shadow, which is a CSS3 property (as is border-radius, but border-radius is what makes the input round.) Check out this tool for an easy-to-use configurator for styling with CSS3: