Detailed Form Styling (4 posts)

  1. kuran
    Posted 3 years ago #

    I have googled this over and over, but cannot find up-to-date tutorials on the possibilities when styling forms.

    An example can be found here, by a talented dribbble author: http://dribbble.com/shots/200855-Form-error-styling

    -How does he achieve this effect? I am specifically talking about the second outer border around the field.

    Another question..


    -How can you use an image as a field background?
    -Where can I set it so that the 'selection' area (when filling or highlighting the form) has a specific color?

    Thanks for any help!

  2. wspencer
    Posted 3 years ago #

    There are a lot of cool things you can do by using the :focus pseudo class/element in CSS! example.....

    input:focus { background-color: #CCC; }

    By putting that code in your CSS, whenever a user clicks on a field to enter text, the background of the text area will turn gray.

    Try playing around with the different CSS properties you can control and assigning them to that pseudo class/element.

  3. kuran
    Posted 3 years ago #

    Thanks wspencer, do you know of a resource that has all the styling options specific for forms and input fields?

    I have no idea where to start looking to find out how to make that second stroke effect that is shown in my original post.

    Thanks a lot!

  4. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    Maybe you'll find some useful info there?

    You can look at my contact me page on that site too, to see that code in action.

    Espcially in Chrome, where clicking on a field triggers a pulsing animation

Topic Closed

This topic has been closed to new replies.

About this Topic