Form Highlight Colour/redirecting

Levi

Moderator
Staff member
I've just made a form for my website redesign and being more of a hobbyist in full websites I'm now curious as to whether or not there is an easy way to have the boxes highlight in a different colour as it doesn't quite work with the current website scheme :(.

Currently they all highlight in a shade of blue, is it possible to change this (easily) within the html (css?) to a red (I've got a hash code) or are they set by the operating system/web browser.

I know I can change the buttons using an image file but theres also a browse files button which I don't think I can change.

link if needed and the site is far from finished (still got some tidying up on code and layouts etc) but it will be coming up for review when its a bit further along :D

Also as a side aspect does anyone know of any good links to learn about redirecting to a mobile/javascript free site.

Any help would be greatly appreciated and thanks in advance. :D
 
Your best bet is to apply a class to the inputs you which to target for example <input type="text" name="first-name" class="yourclass" />

Then in the css put .yourclass {background-color:#yourRef; border:solid 2px #yourRef}
you can also use :focus to highlight in a differentcolour when clicked on eg .yourclass:focus {}

hope that helps
 
I think it helps, whether I understand it is another matter but I got a basic idea of it (I am still learning after all) :)
I'll go try and see if I can get it working :)

ta very
 
This will produce what tbwcf meant, hope it helps:

<style>
.colourMe
{
border:1px solid red;
outline:none;
}
.colourMe:focus
{
border:1px solid green;
}
</style>

<input type="text" class="colourMe">

You can add all sorts of styles but avoid using backgrounds unless you can tile them horizontally because in IE they move as you type (dunno if they still do in 8) you can even curve them with jquery
 
I had another look and it looks like you've already applied a class to your input fields so just add to the css in those... you can also use the input tag within the css but that would affect your buttons also...

so like

input ((no dot or hash before as its a tag)) {border: ; background-color: ;}

would go in your css - let me know if you need more and I'll try and help!

EDIT: sorry to talk over you Mike, hadn't seen your post
 
tbwcf said:
I had another look and it looks like you've already applied a class to your input fields so just add to the css in those... you can also use the input tag within the css but that would affect your buttons also...

so like

input ((no dot or hash before as its a tag)) {border: ; background-color: ;}

would go in your css - let me know if you need more and I'll try and help!

EDIT: sorry to talk over you Mike, hadn't seen your post
explain the 'input' bit a little more please as I want the red to flash over the submit/browse/reset buttons too if possible :)


Well I've managed the red borders but they're not on :focus so am working on that at minute :)
trying to do a class approach in the css but will probably mess it up somewhere :rolleyes:

edit:forgot thanks everyone, don't know styles very well so will go hunt out info on that cheers :)
 
ok so I've got the main boxes changed (normal,hover and focus) and the buttons are changed too (will try changing them to images later) but I can't seem to change the 'upload file' box.
Is there a way I can do this as I can't seem to find any options like with the other I don't even mind if it doesn't have the browse button, as clicking on the box works just the same :)

linky
Its still being worked on and thanks again for any help :)
 
Levi said:
explain the 'input' bit a little more please as I want the red to flash over the submit/browse/reset buttons too if possible :)
It's just the HTML for the form, any <input> tags will be styled as such.

You can do that with anything HTML wise, just like <body> (eg. body { background-color:#AAAAA; } ) or <div> (eg. div { border:2px solid #FAFAFA; } )

Likewise if you add a class (eg. <div class="footer">) then you could call upon that class as .footer or as an ID (eg. <div id="footer">) then it would be #footer.

Key thing to note is that a class can be used as many times as you want whereas an ID is once PER PAGE.
 
ah now I get, I understand what I managed to get working now :)

Now onto my next problem :)
 
Next problem? If you need any help just give us a shout, also google W3Schools CSS and read through that during the next week or two :)
 
yeah everythings changed (like its supposed to) except the 'browse' button (and its text box) for the file upload - still looking into it though (I'm stubborn like that :)).

And my mootools 'litebox' is playing silly beggars and is not doing as its supposed to, even more annoying when I've had it working but stupidly deleted the working bit!
 
ok replying to myself now :)

Bit of a rant why is it that browsers have to feel the need to take over forms. I had everything (except my file upload) looking how I wanted it in firefox and ie7/8 and even opera 10 worked but does safari want to play - no, it still wants to take control, its bad enough I can't get to the bloomin start bar when its running

Is this rant just me or does anyone else feel like this :)
 
Post up some screenshots of how they're acting differently and we may be able to help Levi.

Each browser does act differently with forms though, they each have their own preference.
 
cheers Fred
heres the picture (sorry if its a bit big)

Safari's ignoring the colours and different interface I can live with and I'll blame it on apple being apple :)

It would be nice though if firefox (being the second largest browser) could atleast look similar to the others on the file upload box :rolleyes: I'm going to try adding a height and width setting to it and see if that helps :)

Mike, it seems to be working though except in safari but I'll take a look at yours too :)

Yeah, ranting is part of the reason I don't really do web design, give me my cad any day :p
 

Attachments

  • contact-form-differences.jpg
    contact-form-differences.jpg
    83.8 KB · Views: 4
sorry on delay, isp had a fit and stopped working

yeah thats the approach I'm taking, its just annoying in this day of 'web standards' that they still don't look the same - I feel sorry for you full on web designers :p
 
rather than starting a new thread as its still linking in :)

Ok now I've got a form thats working as well as can be expected in terms of layout (thanks everyone) so that side of things is sorted (just need to adjust a couple of the label locations which should be easy enough )

I've even managed to get together a script (program generated I must admit) that does do what I want kind of :)

Now theres a couple of bits which aren't doing as I would like or expect and just want to see if its an easy fix or the area I need to look into to get it working :).

1) It doesn't appear to keep the data on the page if you go to another page and then go back in the browser using the back button. Is this something to do with storing the session info?

2) It has to have an @ symbol used in the (I assume) email box and if it doesnt it either gives an error or tries to load the php file.
I think its down to it checking but I'm not worried over that, I'm not stupid when it comes to emails etc so I don't really need it, so I don't mind if the checking bit is removed but I want to make sure its the bit
Code:
function ValidateEmail($email)   {      $pattern = '/^([0-9a-z]([-.\w]*[0-9a-z])*@(([0-9a-z])+([-\w]*[0-9a-z])*\.)+[a-z]{2,6})$/i';      return preg_match($pattern, $email);   }
before deleting it :)

3) is there a way to make it send you to a page if the file is too big rather than just not sending it through as it appears to do at the moment.

4) Where would I find the php.ini, is it accessible by me or is it a server wide thing, as I would like to up my limit (which is supposedly done in this file) from 1meg which my host currently appears to be using to atleast 2megs, I can upload in excess of 3 megs on my nas but can only do 1meg via my host (I will most likely be moving anyways as they don't seem to like replying to emails :rolleyes:).

I've attached the php as a text a well as in cde below and the addess is the same as earlier if need be.
All the sections on the form are pretty self explanatory I think.

Any help here would be greatly appreciated as I've checked w3c and it didn't seem to have anything that I thought would help here.

Code:
<?php   function ValidateEmail($email)   {      $pattern = '/^([0-9a-z]([-.\w]*[0-9a-z])*@(([0-9a-z])+([-\w]*[0-9a-z])*\.)+[a-z]{2,6})$/i';      return preg_match($pattern, $email);   }   if($_SERVER['REQUEST_METHOD'] == 'POST')   {      $mailto = '[email protected]';      $mailfrom = isset($_POST['email']) ? $_POST['email'] : $mailto;      $subject = 'Online Form Submission';      $message = 'Values submitted from web site form:';      $success_url = '/test/success.html';      $error_url = '/test/failure.html';      $error = '';      $eol = "\n";      $max_filesize = isset($_POST['filesize']) ? $_POST['filesize'] * 2048 : 2048000;      $boundary = md5(uniqid(time()));      $header  = 'From: '.$mailfrom.$eol;      $header .= 'Reply-To: '.$mailfrom.$eol;      $header .= 'MIME-Version: 1.0'.$eol;      $header .= 'Content-Type: multipart/mixed; boundary="'.$boundary.'"'.$eol;      $header .= 'X-Mailer: PHP v'.phpversion().$eol;      if (!ValidateEmail($mailfrom))      {         $error .= "The specified email address is invalid!\n<br>";      }      if (!empty($error))      {         $errorcode = file_get_contents($error_url);         $replace = "##error##";         $errorcode = str_replace($replace, $error, $errorcode);         echo $errorcode;         exit;      }      $internalfields = array ("submit", "reset", "send", "captcha_code");      $message .= $eol;      foreach ($_POST as $key => $value)      {         if (!in_array(strtolower($key), $internalfields))         {            if (!is_array($value))            {               $message .= ucwords(str_replace("_", " ", $key)) . " : " . $value . $eol;            }            else            {               $message .= ucwords(str_replace("_", " ", $key)) . " : " . implode(",", $value) . $eol;            }         }      }      $body  = 'This is a multi-part message in MIME format.'.$eol.$eol;      $body .= '--'.$boundary.$eol;      $body .= 'Content-Type: text/plain; charset=iso-8859-1'.$eol;      $body .= 'Content-Transfer-Encoding: 8bit'.$eol;      $body .= $eol.stripslashes($message).$eol;      if (!empty($_FILES))      {          foreach ($_FILES as $key => $value)          {             if ($_FILES[$key]['error'] == 0 && $_FILES[$key]['size'] <= $max_filesize)             {                $body .= '--'.$boundary.$eol;                $body .= 'Content-Type: '.$_FILES[$key]['type'].'; name='.$_FILES[$key]['name'].$eol;                $body .= 'Content-Transfer-Encoding: base64'.$eol;                $body .= 'Content-Disposition: attachment; filename='.$_FILES[$key]['name'].$eol;                $body .= $eol.chunk_split(base64_encode(file_get_contents($_FILES[$key]['tmp_name']))).$eol;             }         }      }      $body .= '--'.$boundary.'--'.$eol;      mail($mailto, $subject, $body, $header);      header('Location: '.$success_url);      exit;   }?>
 

Attachments

  • form.txt
    3 KB · Views: 1
Back
Top