Spry And Css Form

Hi

Just looking for some help, I would like to add rounded corners to my form text fileds im using spry and the site is at deejaydiamond.bugs3.com/

any help would be great.

I think if i right i just use something like this?

#sprytextfield1 {
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;

and if so do I put it in my main css or the spry one?

yes, that css looks correct. IT is specifically targeting only the one field with the ID sprytextfield1, you could use the input selector to broaden the rule and apply it to all input elements:
input {
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}

The css should go in your main css file, not the spry css file.

see the following page for more details on styling form elements:
roadmap_03.php

Thanks Jason

What are the other border-radius? i.e whats the opera one and any other i should use? also I have done that and its works so thanks again but its not working for the message filed?

border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px
opera

Opera doesn't have a specific border radius implementation, see this page for more details:
border-radius/


a textarea is not an input filed type. you need to include textarea in the selector of the css to target text boxes as well as text fields:

input, textarea {
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}

Thanks Jason, as alwasy you have a been great.

One last thing.

Im looking for a way to have text displayed in the text filed like

in the email box i would like it to say enter your email address and when the box is click or or selected the text gos away.

How is this done?

use javascript onFocus and onBlur events:

<input name="emailAddress" type="text" id="emailAddress" value="enter your email address" onFocus="if(this.value=='enter your email address')this.value='';" onBlur="if(this.value=='')this.value='enter your email address';"/>

Sorry to be a pain can you please copy the code from my form and change it so i can copy and past and then ill see where to add the/change it.

Thanks

<div id="formContainer">
<form id="form1" name="form1" method="post" action="index.html">
<div class="formStyle" id="name"><span id="sprytextfield1">
<label for="name2"></label>
<input type="text" name="name" id="name2" />
<span class="textfieldRequiredMsg">Name required.</span></span></div>
<div class="formStyle" id="email"><span id="sprytextfield2">
<label for="email"></label>
<input type="text" name="email" id="email" />
<span class="textfieldRequiredMsg">Email required.</span><span class="textfieldInvalidFormatMsg">Invalid email.</span></span></div>
<div class="formStyle" id="phone"><span id="sprytextfield3">
<label for="phone"></label>
<input type="text" name="phone" id="phone" />
<span class="textfieldRequiredMsg">Phone required.</span></span></div>
<div class="formStyle" id="message"><span id="sprytextarea1">
<label for="message"></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
<span class="textareaRequiredMsg">Message required.</span></span></div>
<br />
<div id="captcha"></div>
<img src="/HDWFormCaptcha/FormCaptcha.php?width=180&amp;height=60&amp;letter_count=5&amp;min_size=35&amp;max_size=45&amp;noise=100&amp;noiselength=3&amp;bcolor=ffffff&amp;border=000000" width="180" height="60" id="captchaimg" alt="security code" border="0" /><br />
Enter Security Code:<br />
<input type="text" size="20" name="hdcaptcha" id="hdcaptcha" value="" />
<br />
<?php if (isset($_GET["hdwmsg"]) && $_GET["hdwmsg"] == "invalid") echo chr(60)."font color=red".chr(62)."Please, enter the correct security code.".chr(60)."/font".chr(62); ?>
<script type="text/javascript">function HDW_getCookie(name){ var cname = name + "=";var dc = document.cookie; dc = dc.replace(/\+/g," "); if(dc.length > 0) {begin = dc.indexOf(cname); if (begin != -1) {begin += cname.length; end = dc.indexOf(";", begin); if(end == -1) end = dc.length; var rt = dc.substring(begin, end); return unescape(rt); } } return null;}try {var items = document.getElementsByTagName("input");for(i=0;i < items.length;i++)if (items[i].name != "hdcaptcha" && items[i].name != "hdwfail" )try{var ck = HDW_getCookie("hdw_"+items[i].name);if (ck != "" && ck != null){if (items[i].type == "checkbox")items[i].checked = true;else if (items[i].type == "radio" && items[i].value == ck)items[i].checked = true; else items[i].value = ck;}} catch (e) {}var items = document.getElementsByTagName("select");for(i=0;i < items.length;i++)try{var ck = HDW_getCookie("hdw_"+items[i].name);if (ck != "" && ck != null){for (j=0;j < items[i].length;j++)if (items[i].options[j].value == ck)items[i].selectedIndex = j; }} catch (e) {}var items = document.getElementsByTagName("textarea");for(i=0;i < items.length;i++)try{var ck = HDW_getCookie("hdw_"+items[i].name);if (ck != "" && ck != null)items[i].value = ck;} catch (e) {}} catch (e) {}</script>
<div class="formStyle" id="send">
<input type="submit" name="send" id="send2" value="Submit" />
<input type="reset" name="reset" id="reset" value="Reset" />
</div>
<input type="hidden" name="hdwfail" id="hdwfail" value="error.php" />
</form>
</div>

ok, well, an example would be the name element:

<input type="text" name="name" id="name2" />

edit it to have a default value:

<input type="text" name="name" id="name2" value="Please Enter a Name" />

then add the onFocus and onBlur events:

<input type="text" name="name" id="name2" value="Please Enter a Name" onFocus="if(this.value=='Please Enter a Name')this.value='';" onBlur="if(this.value=='')this.value='Please Enter a Name';" />

the onfocus event:

onFocus="if(this.value=='Please Enter a Name')this.value='';"

checks to see if the value of the element is the default value, in this case "Please Enter a Name". if it is, then it clears the value and sets it to blank.

the onblur event:

onBlur="if(this.value=='')this.value='Please Enter a Name';"

checks to see if the value is blank, if it is, it sets it to the default "Please Enter a Name" value.

so it should look like this then?

<input type="text" name="name" id="name2" value="Please Enter Your Name" onFocus="if(this.value=='Please Enter a Name')this.value='';" onBlur="if(this.value=='')this.value='Please Enter a Name';" />

yes, that is correct.