Can I Change the Background Color in Input Type Text

Change Input Background color

Hello,

I see in many web sites, such in Google, inputs that when i click on
them to write something they change their style. This works both in
Firefox and IE (These are the ones with which I tried)

How can I do this?

Thanks,
Miguel

Jun 7 '07 #1

13 49152

On Thu, 07 Jun 2007 15:28:55 +0200, shapper <md*****@gmail.comwrote:

Hello,

I see in many web sites, such in Google, inputs that when i click on
them to write something they change their style. This works both in
Firefox and IE (These are the ones with which I tried)

How can I do this?

Not with pure CSS.

You can change classes on a onclick/onfocus/onchange/etc. event with
javascript. Make sure your input fields are well legible in the old style
for the people with javascript disabled.

HTH,
--
Rik Wasmus

Jun 7 '07 #2

Rik wrote:

On Thu, 07 Jun 2007 15:28:55 +0200, shapper <md*****@gmail.comwrote:

>I see in many web sites, such in Google, inputs that when i click on
them to write something they change their style.

How can I do this?

Not with pure CSS.

Sure you can, just not in IE.
input:focus {background: #000; color: #fff}

--
Berg

Jun 7 '07 #3

On Jun 7, 7:28 am, shapper <mdmo...@gmail.comwrote:

Hello,

I see in many web sites, such in Google, inputs that when i click on
them to write something they change their style. This works both in
Firefox and IE (These are the ones with which I tried)

How can I do this?

hey shapper, what is wrong with this:
http://groups.google.com/group/comp....cbec6240ed42c6

Jun 7 '07 #4

Scripsit Bergamot:

>Not with pure CSS.

Sure you can, just not in IE.
input:focus {background: #000; color: #fff}

You can even do this:

input:hover { background: aqua; color: black; }
input:active { background: lime !important; color: black; }
input:focus { background: yellow; color: black; }

This changes the background color on mouseover, then on mousedown, and yet
again when you release the mouse button after having pressed it down. Just
not on IE, except for the :hover part. Other parts can be simulated with
JavaScript, though, with the usual scripting caveats.

The interpretation of :active varies, though. Oddly enough, Firefox seems to
treat virtually anything (including the body element) as potentially
:active. If you use, say, <p tabindex="42"(violating HTML rules, which
don't allow tabindex for <p>), then even the paragraph can be in the :focus
and :active pseudoclasses. Where will this end?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 7 '07 #5

On Thu, 07 Jun 2007 19:45:20 +0200, Bergamot <be******@visi.comwrote:

Rik wrote:

>On Thu, 07 Jun 2007 15:28:55 +0200, shapper <md*****@gmail.comwrote:

>>I see in many web sites, such in Google, inputs that when i click on
them to write something they change their style.

How can I do this?

Not with pure CSS.

Sure you can, just not in IE.
input:focus {background: #000; color: #fff}

The trick here is: to let it stay that way _after_ the onfocus... So if
focus change, the style shouldn't change back. At least, that's what I'd
think the OP meant.

--
Rik Wasmus

Jun 7 '07 #6

Rik wrote:

On Thu, 07 Jun 2007 19:45:20 +0200, Bergamot <be******@visi.comwrote:

>input:focus {background: #000; color: #fff}

The trick here is: to let it stay that way _after_ the onfocus... So if
focus change, the style shouldn't change back. At least, that's what I'd
think the OP meant.

I didn't read it that way at all, but to just to highlight the currently
active field, which is what :focus does.

--
Berg

Jun 8 '07 #7

On Thu, 07 Jun 2007 06:28:55 -0700, in
comp.infosystems.www.authoring.stylesheets shapper <md*****@gmail.com>
<11*********************@p47g2000hsd.googlegroups. comwrote:

>| Hello,
|
| I see in many web sites, such in Google, inputs that when i click on
| them to write something they change their style. This works both in
| Firefox and IE (These are the ones with which I tried)
|
| How can I do this?

<input type='text' onFocus='this.style.bgColor=red;"
onBlur="this.style.bgColor=white;" .... />

If javascript is disabled then the user will not see the changes.
---------------------------------------------------------------
jn******@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

Jun 9 '07 #8

Scripsit Jeff North:

<input type='text' onFocus='this.style.bgColor=red;"
onBlur="this.style.bgColor=white;" .... />

The issue was whether things can be done in CSS. I guess most people know
the JavaScript way, at some level, and it's basically off-topic in this
group.

But if you give an example of a non-CSS way, you should give a good example.
You're using XHTML syntax for a "self-closing" tag, yet non-XHTML spelling
for the attribute names, so the markup isn't correct in _any_ HTML version.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 9 '07 #9

On Sat, 9 Jun 2007 17:21:21 +0300, in
comp.infosystems.www.authoring.stylesheets "Jukka K. Korpela"
<jk******@cs.tut.fi>
<4H********************@reader1.news.saunalahti.fi wrote:

>| Scripsit Jeff North:
|
| <input type='text' onFocus='this.style.bgColor=red;"
| onBlur="this.style.bgColor=white;" .... />
|
| The issue was whether things can be done in CSS. I guess most people know
| the JavaScript way, at some level, and it's basically off-topic in this
| group.

Oh get off your high horse.
There are actions than should be done in script and others that can be
done in styling. Changing the style of a control should be done in
scripting (unless you want to jump through the semantic hoops of each
browsers implementation of the css standard).

>| But if you give an example of a non-CSS way, you should give a good example.
| You're using XHTML syntax for a "self-closing" tag, yet non-XHTML spelling
| for the attribute names, so the markup isn't correct in _any_ HTML version.

People in glass houses shouldn't throw stones.
If you are such a stickler for the 'rules' then why, on your own site,
do you not follow the 'rules'. You use a table for layout for
non-tabular data.
---------------------------------------------------------------
jn******@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

Jun 10 '07 #10

Jeff North wrote:

On Sat, 9 Jun 2007 17:21:21 +0300, in
comp.infosystems.www.authoring.stylesheets "Jukka K. Korpela"
<jk******@cs.tut.fi>
<4H********************@reader1.news.saunalahti.fi wrote:

>| Scripsit Jeff North:
|
| <input type='text' onFocus='this.style.bgColor=red;"
| onBlur="this.style.bgColor=white;" .... />
|
| The issue was whether things can be done in CSS. I guess most people know
| the JavaScript way, at some level, and it's basically off-topic in this
| group.

Oh get off your high horse.
There are actions than should be done in script and others that can be
done in styling. Changing the style of a control should be done in
scripting (unless you want to jump through the semantic hoops of each
browsers implementation of the css standard).

Should be done in script? Says who?
First of all, your JavaScript is incorrect. There is no bgColor
attribute in style collection in the DOM. It is backgroundColor. bgColor
was old attribute of very old browsers that I recall was direct property
of the element.

Next, the values white and red need to be quoted so your onFocus needs
to be:

onFocus="this.style.backgroundColor='red';"

in order to function. Jukka's horse may be high, but at least he knows
how to ride.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jun 10 '07 #11

In article <0h********************************@4ax.com>,
Jeff North <jn******@yahoo.com.auwrote:

On Sat, 9 Jun 2007 17:21:21 +0300, in
comp.infosystems.www.authoring.stylesheets "Jukka K. Korpela"
<jk******@cs.tut.fi>
<4H********************@reader1.news.saunalahti.fi wrote:

| The issue was whether things can be done in CSS. I guess most people know
| the JavaScript way, at some level, and it's basically off-topic in this
| group.

Oh get off your high horse.
There are actions than should be done in script and others that can be
done in styling. ....

| But if you give an example of a non-CSS way, you should give a good
example.
| You're using XHTML syntax for a "self-closing" tag, yet non-XHTML spelling
| for the attribute names, so the markup isn't correct in _any_ HTML
version.

People in glass houses shouldn't throw stones.
If you are such a stickler for the 'rules' then why, on your own site,
do you not follow the 'rules'. You use a table for layout for
non-tabular data.

If all of us only ever pointed out faults which we had always
avoided personally, there would not be much left of the
newsgroup. At least it would lose all its edge, there would be no
one left to advise, discuss and riot.

I am not criticising you in particular. This is just to put in a
good word for a healthy bit of the much undervalued activity of
calling the kettle black.

To be fair to JK (your desire to do this might reasonably vary),
some of his material is quite old and he has argued in many posts
about the waste of time it would be to "update" old mark-up to
better reflect modern practice for no particular good reason. He
also has a healthy perspective on tables for layout, seeing some
uses as trivially "bad" only. The example he said was incorrect
(concerning "self-closing" tags) was a more strictly technical
point than the practice of using tables for layout.

Jeff, I have argued in the past that it is important that JK
stays on his high horse. It is to the ultimate benefit of
everyone. A newsgroup, as with any mind that aspires to decency,
needs a conscience. JK _is_ that conscience.

--
dorayme

Jun 10 '07 #12

On 2007/06/10 00:59 (GMT) Jeff North apparently typed:

Jukka K. Korpela wrote:

>>| But if you give an example of a non-CSS way, you should give a good example.
| You're using XHTML syntax for a "self-closing" tag, yet non-XHTML spelling
| for the attribute names, so the markup isn't correct in _any_ HTML version.

If you are such a stickler for the 'rules' then why, on your own site,
do you not follow the 'rules'. You use a table for layout for
non-tabular data.

A single table for basic layout is not evil: http://developer.apple.com/internet/...estwebdev.html
--
"Respect everyone." I Peter 2:17 NIV

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://mrmazda.no-ip.com/

Jun 10 '07 #13

On 2007-06-10, Jeff North wrote:

On Sat, 9 Jun 2007 17:21:21 +0300, in
comp.infosystems.www.authoring.stylesheets "Jukka K. Korpela"
<jk******@cs.tut.fi>
<4H********************@reader1.news.saunalahti.f iwrote:

>>| Scripsit Jeff North:
|
| <input type='text' onFocus='this.style.bgColor=red;"
| onBlur="this.style.bgColor=white;" .... />
|
| The issue was whether things can be done in CSS. I guess most people know
| the JavaScript way, at some level, and it's basically off-topic in this
| group.

Oh get off your high horse.
There are actions than should be done in script and others that can be
done in styling. Changing the style of a control should be done in
scripting (unless you want to jump through the semantic hoops of each
browsers implementation of the css standard).

If you need to jump through hoops to do it with CSS, you probably
need to learn more about CSS.

>>| But if you give an example of a non-CSS way, you should give a good example.
| You're using XHTML syntax for a "self-closing" tag, yet non-XHTML spelling
| for the attribute names, so the markup isn't correct in _any_ HTML version.

People in glass houses shouldn't throw stones.
If you are such a stickler for the 'rules' then why, on your own site,
do you not follow the 'rules'. You use a table for layout for
non-tabular data.

There is no rule against using tables for layout. It is not
recommended in most cases, for good reasons, but it is not wrong.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
========= Do not reply to the From: address; use Reply-To: ========
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Jun 11 '07 #14

This discussion thread is closed

Replies have been disabled for this discussion.

Can I Change the Background Color in Input Type Text

Source: https://bytes.com/topic/html-css/answers/658857-change-input-background-color

Share this post