Simple css question

jameslomax · 2006-05-28 19:08:25

I’d like to change the text area and border colour of an e mail submisison form, but without changing the same thing in my dropdwon menu. any idea how I do that?

This changes the e mail, but it also changes the display of my dropdown menu:

input, textarea, select {
background-color: #F8F7F5;
border: 1px solid #bdcbd7;

- which is OK for one of my sites, but not the other.

Thanks!

mrdale · 2006-05-28 20:47:49

I assume you want the text area to have the border, but not the select. In which case just split apart the definitions.

<code>input, textarea, select {
background-color: #F8F7F5;}
textarea {
border: 1px solid #bdcbd7;
} </code>

If it’s a form you coded yourself, just code some IDs. If not you can always use descendant selectors.

#containerDiv textarea {}

Hope this helps

jameslomax · 2006-05-29 13:01:40

Ack, not quite.

The border and textarea styling can apply to both the e mail area and the “select” (does that mean the dropdown menu?) for one of my sites – it works nicely – but not the other.

With the other site, I need to seperate

1) e mail text area styling and
2) the styling for the select/dropdown menu

At the moment, the css styles both and I’ve no idea how to change this

Ace of Dubs · 2006-05-29 14:54:50

For the items on the second which need to be different, you have to assign a different ID as mrDale said.

It’s hard to help you without seeing the code, so post the CSS for your dropdown and forms along with the HTML that references it.
To show code on this forum just type it all in after . b q (delete the spaces)

As far as I know, most dropdowns use javascript so it would be wise to see if any styling is done there.

ps – “Select” is not for dropdown, it is the styling for the field when you click on, or select it.

Mary · 2006-05-29 21:22:46

ps – “Select” is not for dropdown, it is the styling for the field when you click on, or select it.

Huh? That’s not correct.

jameslomax · 2006-05-31 10:30:46

Theres no default styling in the javascript dropdown menu. If I remove this, the e mail forms and dropdown menu become unstyled:

<code> input, textarea, select {
background-color: #F8F7F5;
border: 1px solid #bdcbd7;</code>
<p>

So the code I need is to style the e mail textarea only, without effecting the dropdown menu

Any idea what it is?

Last edited by jameslomax (2006-05-31 10:31:29)

NyteOwl · 2006-05-31 19:43:28

if you assign the style values to a style ID as indicated earlier and then only use that ID (an ID can only be used once per document) on the mail form it should only affect the mail form. If something else is happening it ispretty much impossible to diagnose without seeing the markup/code and stylesheet being used.

jameslomax · 2006-06-01 10:13:57

Could you please give me a css example to do that, and I’ll try it?

Thats all this needs…..there is no issue with anything else happening, except for what I’ve described and the code I provided and what it does (this has got a bit over-complicated…….).

Thanks!

jameslomax · 2006-06-14 08:39:22

Anyone?
:(

Basically, this is it: I need the css to style the e mail form which does not, at the same time, style my dropdown menus…..

NyteOwl · 2006-06-15 01:02:36

mrdale already listed the technique above. If you assign a unique ID to the form and the relevant css then it should only affect the form, not the menus.

jameslomax · 2006-06-16 23:43:24

I dont understand this, because I’m not familiar with either the semantics of css or the code. What I need is not a theoretical or conceptual description, but just the tiny piece of css code that I can then insert and use to style the e mail form. Doesn’t matter if the colour’s not what I want, because I can change that….

whatbrick · 2006-06-17 00:19:46

It would help if we had the markup to the form you want to change, but I’ll try and describe the basics of what has been said.

input, textarea, select {
background-color: #F8F7F5;
border: 1px solid #bdcbd7;
}

As you know, this will style every input, textarea and select element on every page that the style is attached to. You can target elements more specifically by giving them unique identifiers (ID or class) like the following:

<form name="someForm" id="contactForm">
<input type="text" name="name" />
<textarea name="message"></textarea>
</form>

Something like this would work as well:

<div id="contactForm">
<form name="someForm">
<input type="text" name="name" />
<textarea name="message"></textarea>
</form>
</div>

The id="contactForm" can be used in a stylesheet to target all the form elements that are contained within the form tag (or the div in the second example) using something like this:

#contactForm input, #contactForm textarea, #contactForm select {
background-color: #eee;
border: 1px solid #ccc;
}

That’s basically what the others have said. Does that make more sense?

Textpattern CMS

Textpattern CMS support forum

#1 2006-05-28 19:08:25

Simple css question

#2 2006-05-28 20:47:49

Re: Simple css question

#3 2006-05-29 13:01:40

Re: Simple css question

#4 2006-05-29 14:54:50

Re: Simple css question

#5 2006-05-29 21:22:46

Re: Simple css question

#6 2006-05-31 10:30:46

Re: Simple css question

#7 2006-05-31 19:43:28

Re: Simple css question

#8 2006-06-01 10:13:57

Re: Simple css question

#9 2006-06-14 08:39:22

Re: Simple css question

#10 2006-06-15 01:02:36

Re: Simple css question

#11 2006-06-16 23:43:24

Re: Simple css question

#12 2006-06-17 00:19:46

Re: Simple css question

Board footer