Build Your Own Business Website header image

How to Change the Style of Text Inputs

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to change the border color and width of the text box in a contact form using custom CSS. We show you how to make changes to the CSS so you can preview them using Firebug and Web Developer first before changing your custom CSS file.

Video Transcript

So you want to figure out how to change the background color of a text box and a contact form is that right?

Correct. Specifically when you click on the box, it’ll border a blue and I’d like to change that border color.

Do you have an address where I can see this in action?


Okay and so then on the Contact Us page, you’re talking about right there?


And what do you want to happen?

Well, when you click it, I see an orange. However, when I go to another website like if I use Google Chrome or when I use my Safari and I click it, it shows blue.

Okay so this is Chrome on the PC. Let’s see, Firefox… okay so in Firefox, it’s using the gray on the PC. In IE 9, it’s using the gray also. So what do you want it to do?

I’d like it to be the same color that I use for… the orange color that’s on my tabs on the nav bar.

That color right there? Same color as this then?

Yes, sir.

Same color as this?

Yes, sir.

Okay so…

Same color as that orange but I’m trying to get that to go away too. That’s a whole other issue.

Sure but I’m just using this to pick the color. I just want to know what that color is. Okay so the trick to this is changing the color for the on click event. And you know right now, it’s just white. When you click in there, you’ve created a whole new possible set of styles and you just want the border? Is that the deal? You click on it and you want the border?

Yes, sir.

Okay so then if we edit CSS in Web Developer and then we inspect the element in Firebug, you’ve got 2 different elements going on here. One of them is the input type = text element and the other text area element. And so this is the text area and of course, the smaller one is the input type = text, that right there. And so we need 2 different sets of rules for this and if we click in here… actually, what it’s saying is input: focus. So focus is the pseudo…what’s that called…pseudo element. It’s like hover and active. In this case, it’s focus.

And so what you would do is come over to custom CSS and if you want this applied to absolutely everything on your site then what you would do is say .custom and then let’s see, actually it would just be input, type = text. I think it’s going to be : focus. It’s either input: focus type = text or input… we’ll just try it both ways and see what happens.

And then I’m just going to grab this border definition here. Let’s just go back in there for a second because what we’re going to do is… well, we could easily just change that color first. Border: # and then paste that… oh, I didn’t copy this yet. Copy this color. So let’s see, did that work? No. So then let’s just make sure border color isn’t what we should be doing. Okay so then it’s focus type = text. The alternative to…no, look at that.

So this is more specific yet and so the… so we need to make our thing more specific so what we’ll do is we’ll say… let’s say format text. So it’s .custom .format_text input. No, still not happening. Actually, let’s just make sure there’s not an error here preventing this from working. Yeah, see that’s the other thing. There’s an error down here someplace that was preventing my code from working. So it was actually… it was the right code it’s just that it… it was failing over here because there’s something wrong in this area.

So for example, that would put the yellow around there. You could also increase the border width if you wanted to… colon 2 px, right? So now it’s bigger, if that’s what you want to accomplish. So it’s the focus pseudo element that you want to address. Same thing is going to be true for the text area so now we’re just going to say the… let’s get rid of that. And then instead of input, it’ll just be text area. And it doesn’t have a type equals so we’re just going to get rid of that and there you go.

So that’s the… so the way we figured it out first, let’s just kind of sum up the things I did here. First off, I know that this is input type = text and this is a text area. So that you know, starts off the process of figuring out what should happen. This is also a type = text but this is a type = input or a type = submit. So if you inspect that element, you can see that it’s input type = submit. And so you have really different form types here. You’ve got the submit form type. You’ve got the text input form type and you’ve got the text area form type.

So anyway, we start off with that. We have these 2 elements and then the question is what’s the right selector then or… yeah, what’s the right selector for applying the different border when you’ve got your mouse in there? And the correct selector for that is the pseudo element focus and then it’s just applying a border color and a border thickness to the correct element.

Actually, it’s not just that though because we also decided that it was still being… that it wasn’t specific enough. If you watch Lesson 6 of Customize Thesis Like a Pro, I talk about the concept of specificity and inheritance in CSS. And specificity means that the more specific the rule is, the higher its priority. And .custom .format text is more specific than just .custom. And actually, you can see that .custom does actually work here. The problem wasn’t specificity. The problem was there was an error in the code directly above me. And so, specificity isn’t actually… wasn’t necessary for this to become more specific.

But for example, if this was in the comment area, it would be necessary for it to be more specific because the comment area has an additional element specified in Thesis. And so this style will not affect the comment area. It probably won’t even affect… oh yeah, it did affect the search box. That’s nice. But it won’t affect the comment area because the definition for the comment, the boxes in the comment area are more specific than this. So if you’re not comfortable with the idea of specificity and inheritance, you should watch through Chapter 6 of the Customize Thesis Like a Pro and try to get a handle on the issue of specificity and how to manipulate specificity when you are writing your own custom definitions.

Okay. I did watch it once but I plan on watching it again, just to get a better handle on it.

Sure. No, it’s definitely something that takes a little bit of repetition to really kind of wrap your mind around it. At least, it was for me. It took me a while to be able to figure out how to explain it in a way that made sense, at least, made sense to me. So it’s not the simplest concept.

Right, right. Well, thank you very much Rick. I appreciate you showing me that.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment