#CSS3 transforms to improve the #moodle feedback activity http://www.youtube.com/watch?v=QcoJnQ0gNfI

The Moodle feedback activity is useful in so many ways and we use it both in academic and business areas inside the college.  Unfortunately since Moodle 2 they made it very difficult to allow anonymous guest users to complete them, so we still use our old 1.9 install for public surveys.

We recently started using it across a whole faculty, so several hundred students had to use it.  When I showed a colleague she instantly commented on how unattractive it was so I decided to improve it slightly by modernising the CSS.  I added an animated background colour and glow on the text boxes, with subtle rounded corners.

Here is the CSS:-

.feedback_items input, .feedback_items textarea{
outline:none;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border: 1px solid #b7bbbd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 4px;}

.feedback_items input:focus, .feedback_items textarea:focus {
background-color: #EFF;
box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
}

You will probably like my post on using CSS3 to improve the appearance of the quiz here.