Forms & Style Sheets.


Script unchangables in Blue
Script changables in Red
These Styles all work in IE 5.5+, NS 7, Opera 8, Mozilla 1.8 & Firefox 1.5.
Except in Opera 8 where the text-transform:capitalize; & font-variant:small-caps; shows the text as written in its case.

If you use forms on your site, you should know that there is a very simple method to change the "default" appearance of your form elements. Using CSS, we can assign attributes to the various form elements on our pages to conform to an overall design. Just about every element can be assigned styles for fonts, background colors, etc.

In HTML to put some style into your Input Boxes. In the <head> tags of your document place this.
<style>
input {border: 2px solid Red; font-family: Comic Sans MS, Courier New; font-size:14px;}
</style>

You can use change the pixel size or switch from solid to dotted, dashed or Double. For colours, you can use the text names that are available or the hexadecimal (#00ea62) and ofcourse you can make them as fancy as you like.

Note:If you have Radio Buttons and Checkboxes in the form the style dose not work well on these. So you’d be better of doing the input boxes individually. Thus:
This sets the Font Type and Size for the Whole Form.

<form style= "font-family:Comic Sans MS, Courier New; font-size:14px;">
<input size="
50" type="text" value= "ewok of endor" style= "border: 4px dotted Red; color:# 0000ff; background-color:#ffff00; text-transform:capitalize; font-weight:lighter;">

<input size="
50" type="text" value= "ewok of endor" style= "border: 3px dashed black; color:white; background-color:red; font-variant:small-caps; font-weight:bolder;">

<input size="
50" type="text" value= "ewok of endor" style= "border: 7px double blue; color:lime; background-color:#000000; text-transform:uppercase; font-weight:bold;">
</form>

Type in the Input Boxes to see the Affect.





 

In a Text Area we can do this:
<textarea cols="60" rows="10" style="width:550px; height:220px; color:blue; background-color:#ffffdd; font-family:verdana,arial; font-size:12px; line-height:18px;" name="select1">

You can also with a combination of CSS and JavaScript use this to Highlight and copy to the clipboard.
<style>
    a.goTop:link {font-size:10pt; font-family:arial; color:blue; background-color:yellow; font-weight:bold; text-decoration:none;}
    a.goTop:visited {font-size:10pt; font-family:arial; color:blue; background-color:yellow; font-weight:bold; text-decoration:none;}
    a.goTop:active {font-size:10pt; font-family:arial; color:blue; background-color:yellow; font-weight:bold; text-decoration:none;}
    a.goTop:hover {font-size:10pt; font-family:arial; color:red; background-color:white; font-weight:bold; text-decoration:underline;}
</style>

This the JavaScript and needs to be put in <head> tags
<script language="Javascript">
<!--// Hide from non java broswers
/********************************************************
Contents should be auto copied to clipboard (memory)
This applies only to IE 4+
********************************************************/
//0=no, 1=yes
var copytoclip=1
function SelectAll(theField){
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
if (document.all&&copytoclip==1)    {
    therange=tempval.createTextRange()
    therange.execCommand("Copy")
    window.status="
Contents highlighted and copied to clipboard!"
     setTimeout("window.status=''",1800)
    }
// end If
}
// END
//-->
</script>

This is how your form tag needs to start out.
<form name="This_Form_Name">
<a class="goTop" href="javascript:SelectAll('This_Form_Name.This_TextArea')">Select All</a>
<textarea name="This_TextArea" rows=10 cols=60>

NOTE:
The form name="This_Form_Name" and the textarea name="This_TextArea" have to be the same as the names used in javascript:SelectAll('This_Form_Name.This_TextArea') or it will not work.

Here’s an example: ( You will note that the FORM Tags have Fullstops [.] next to the opening bracket [ < ], these are to stop the browser from getting confused. You must remove these for them to work.)

If using IE to Select and Copy this just left click.
Then use (Ctrl + V) to paste into your document.
Otherwise place your curser in the text box and press (Ctrl + A) then (Ctrl + C)
then use (Ctrl +V) to paste into your document.

The code inside the textarea above will output a form like the one shown below ... and don't it look pretty! Play with CSS variations in your own forms to get the results you want.


  

Script Notes:To put a background image and change you text colour in the textarea all you have to do is place this in your <style> tags.
textarea{background-image:url(blue_saturn.jpg); color:#ff0000;} and this where you want your textarea <textarea rows="12" cols="74" class="textarea"> This will create this affect .

You will note that the STYLE & TEXTAREA Tags have Fullstops (.) next to the opening bracket ( < ), these are to stop the browser from getting confused. You must remove these for them to work.

If using IE to Select and Copy this just left click.
Then use (Ctrl + V) to paste into your document.
Otherwise place your curser in the text box and press (Ctrl + A) then (Ctrl + C)
then use (Ctrl +V) to paste into your document.

 

To create a mouseover to change background and text colour this script will be what you need. In the style script, note that we set the background-color:#000000;
This should usually be the same color as your image background colors and it's done to prevent flashing while the images are actually loaded. Setting the color:#ff0000; and color:#00ff00; sets the text colors to red and green, respectively, in this example; so change them to the colors you wish to use in your design.

Note: That in IE4+, the images will scroll with the text; but with NS6's less dynamic object model, the images may remain static. The code inside the textarea above will output the result you see.

Well I Pray that you have somthing about putting some style into your forms.

You will note that the STYLE & TEXTAREA Tags have Fullstops (.) next to the opening bracket ( < ), these are to stop the browser from getting confused. You must remove these for them to work.

If using IE to Select and Copy this just left click.
Then use (Ctrl + V) to paste into your document.
Otherwise place your curser in the text box and press (Ctrl + A) then (Ctrl + C)
then use (Ctrl +V) to paste into your document.

CU
May peace settle your mind and your life be full of joy.
Gary

 

 

BlueBar.gif




Visitor    
       


                 
Free Text Counter.
Counter added 09/02/2014.

Top