473,788 Members | 2,733 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS / OnFocus / OnBlur Question

Hello,

I have created a form and assigned each of the form elements to a
class in a style sheet.

I would like to know if it is possible to add 'OnFocus' and 'OnBlur'
events to the style sheet class so that I can change the background
color of a form element WITHOUT having to add 'OnFocus' and 'OnBlur'
events to each individual form element..

If this is not doable, please let me know.. If it is, please let me
know that too! And of course, how to do it.

Thanks

Rich
Jul 20 '05 #1
1 20276
rw*****@27east. com (Rich Morey) wrote:
I would like to know if it is possible to add 'OnFocus' and 'OnBlur'
events to the style sheet class so that I can change the background
color of a form element WITHOUT having to add 'OnFocus' and 'OnBlur'
events to each individual form element..


Event handler attributes such as OnFocus and OnBlur are completely
external to CSS. They are HTML attributes, which are used to create a
potential association with some program code in some scripting
language. There's no CSS involved - except in the remote sense that the
scripting code may, perhaps, operate on things that correspond, via the
Document Object Model, some CSS properties.

However, there _is_ something ín CSS that corresponds to OnFocus and
OnBlur in some sense, namely the :focus pseudo-class. But note that
:focus is not supported by IE.

When an element is focused on (and it is browser-dependent what this
really means), then, by CSS specifications, it enters the :focus
pseudo-class. And it leaves that pseudo-class when it loses focus.
Thus, you can create nice effects, on supporting browsers, using fairly
simple CSS constructs like

input:focus { background: #ffd; color: black; }

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
954
by: Rich Morey | last post by:
Thanks for the feedback. I am writing a web based "app" to run on IE, so I guess I'll have to use the OnFocus and OnBlur events in the form elements themselves. Thanks, Rich
1
10500
by: Tzachi | last post by:
Hello all, I have a function that dynamically adds rows and columns to the page. Everything works well except onfocus // onblur attributes. For some reason, when entering the input box it doesn't highlight. If I delete the onblur line, each of the boxes is highlighted all the time regardless of focusing the input box. Can someone help me?
3
3919
by: the good guy | last post by:
For those who have been using Outlook Express, you must be pretty used to the fact that whenever you focus on the preview section, the header for the preview turns from grey to blue, while the text turns from black to white. Here is my HTML script ############################### <body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" onFocus="document.bgColor='orange';document.body.font.fstag.fgColor='black'"...
1
2388
by: Eric Trav | last post by:
Hello, I am using mozilla and javascript to change the style background color for my select with onfocus() and back to white with onblur(). When i process onfocus(); i have to click on the select three times to get the popup menu and everything seems slow. No errors are reported in the console however it seems as if the click event is not being processed after the focus event is processed.
3
2310
by: Nebulus | last post by:
Hey all. I'm working on some VERY big forms, and the user will easily lose their location if they get distracted - which happens a lot with the amount of phone traffic they get. Anyway, I have a function like this: function initForms(){ for(i = 0; i < document.forms.length; i++){ for(j = 0; j < document.forms.elements.length; j++){ el = document.forms.elements
2
23348
kestrel
by: kestrel | last post by:
i have a form, and i want to change the forms css class onfocus, then change back onblur... how can i do this?
1
1933
by: clemtig | last post by:
Say I have a form with two input textfields. Each has an onFocus and onBlur. onFocus will unhide image #1. onBlur will hide image #1, show image #2 and validate the textfield. But the problem is that I get errors when going from one field to another with this combination. I've got it down to the point where I know that going from input field 1: onBlur --to-- input field 2: onBlur + onFocus
2
4708
by: wolverine | last post by:
Hi All, In Mozilla Firefox, to onblur and onfocus event of each and every html element, the browser itself will attach a native event handler. I mean if you type, 'javascript:alert(window.blur)' in the address bar of Firefox browser, you can see a 'function ....' . That is a Firefox browser defined handler. Now assume that web developer also attach event handlers to 'onblur' events eg: 'window.blur=f3()'
0
9498
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9969
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8995
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7519
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6750
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5538
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4074
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3677
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2896
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.