Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 15, 2015 at 11:12 pm #429275
    djshortkut

    I would like some help making a small modification on my contact form on this page. I would like to make it so that whatever box is selected by the user in the contact form will have a 3px outline in this color #2c5b9c showing that box is selected. I only want it to show a border around the active box. Here is an example of another site showing what I am trying to do. Thanks!

    http://amplifiedcreations.com/en/contatos/

    April 16, 2015 at 11:26 pm #429974
    Yigit

    Hi djshortkut!

    Please add following code to Quick CSS 

    #top input[type="text"]:focus, #top input[type="password"]:focus, #top input[type="email"]:focus, #top input[type="number"]:focus, #top input[type="url"]:focus, #top input[type="tel"]:focus, #top input[type="search"]:focus, #top textarea:focus {
  border-color: #2c5b9c!important;
}
#top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select {
  border: 3px solid transparent!important;
}

    Cheers!
    Yigit

    April 17, 2015 at 12:06 am #430012
    djshortkut

    Thanks Yigit! I input the code and it looks like it’s working but the color is a light gray and not showing up in #2c5b9c Can you please let me know how to change the code to get it to work correctly? Thank you!

    April 18, 2015 at 9:18 pm #430754
    Andy

    Hey!

    please use this code in Quick CSS:

    input:focus {
outline: none !important;
border-color: #2c5b9c !important;
}
textarea:focus {
outline: none !important;
border-color: #2c5b9c !important;
}

    Best regards,
    Andy

    April 24, 2015 at 12:45 am #433826
    djshortkut
    This reply has been marked as private.
    April 24, 2015 at 8:44 pm #434394
    Yigit

    Hey!

    Please use following code instead

    #top input[type="text"]:focus, #top input[type="password"]:focus, #top input[type="email"]:focus, #top input[type="number"]:focus, #top input[type="url"]:focus, #top input[type="tel"]:focus, #top input[type="search"]:focus, #top textarea:focus {
  box-shadow: none !important;
  outline: 3px red solid!important;
}

    Cheers!
    Yigit

    April 24, 2015 at 9:14 pm #434431
    djshortkut

    Thanks Yigit, the new code did the trick!

    The only box it doesn’t work on is the select element. Can you modify the code so that it works on the select element as well? Thanks!

    April 24, 2015 at 9:15 pm #434434
    Yigit

    Hi!

    Following code should do it 

    #top input[type="text"]:focus, #top input[type="password"]:focus, #top input[type="email"]:focus, #top input[type="number"]:focus, #top input[type="url"]:focus, #top input[type="tel"]:focus, #top input[type="search"]:focus, #top textarea:focus,select:focus {
  box-shadow: none !important;
  outline: 3px red solid!important;
}

    Regards,
    Yigit

    April 24, 2015 at 9:25 pm #434454
    djshortkut

    Thanks Yigit! You can close this thread.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Contact Form Modification’ is closed to new replies.