1 Topic by md.michel (edited by md.michel 2016-06-21 12:10:21)

  • Registered: 2016-05-31
  • Posts: 30

Topic: CSS and contact form [SOLVED]

I will change the border color of name, email, message.
It's OK with this code for name and email (custom.css):

@media only screen and (min-width: 768px) {
  input[type=text],
  input[type=email] {
    width: 300px;
    border: 1px solid blue;  
  }
 }

But, it's difficult with "message". Can you help me?

  • Registered: 2012-12-16
  • Posts: 950

Re: CSS and contact form [SOLVED]

Add textarea#message to your CSS selectors:

@media only screen and (min-width: 768px) {
    input[type=text],
    input[type=email],
    textarea#message {
        width: 300px;
        border: 1px solid blue;  
    }
}

I usually use my browser's developer tools (accessible via F12) to determine which classes and ids the custom rules should be applied to.

Just a quick reminder...
As you are using a lot of custom CSS in your theme's 'custom.css' file (which is absolutely fine), be sure to make a backup of this file.
If/when you next upgrade Showkase, your 'custom.css' file will be overwritten with the blank version that comes bundled within Showkase and you'll need to reinstate your custom version after upgrading (or you could remove the blank version from the Showkase core files before upgrading).

3 Reply by md.michel (edited by md.michel 2016-06-21 13:22:53)

  • Registered: 2016-05-31
  • Posts: 30

Re: CSS and contact form [SOLVED]

Now I understand better with the browser's developer tools and it's perfect also with  ".custom input[type="submit"]".
I will keep a backup of custom.css.
Thank you!

  • Registered: 2012-12-16
  • Posts: 950

Re: CSS and contact form [SOLVED]

You're welcome.

There are a number of different ways that you can target the 'Message' text area using CSS.
My own suggestion above will target only the 'Message' text area as it uses the element's id (#message) and every id on a web page should be unique.
You can certainly use classes (or input types) to target multiple elements at once (to avoid having to specify individual ids).