Skip to main content
Inspiring
January 20, 2010
Question

Form Colors

  • January 20, 2010
  • 2 replies
  • 677 views

I am using CFFORM. For my cfinput, how do I make the text boxes and/or checkboxes a different color. The form has a mixture of display (no changes) and entry fields and some users are complaning that they cannot see which fields to enter/edit, so I want to make those a different color, like yellow, to stand out.

I tried <cfinput style="color:yellow"> and that did not work. I tried <cfinput style="background color:yellow'> and that just changed the background color to yellow, not the textbox, or the checkbox.

What is the command to make those a different color instead of the default white ?

thanks

This topic has been closed for replies.

2 replies

Inspiring
January 21, 2010

Hi,

Try the border-color attribute like this,

<cfform>
    <cfinput type="text" name="t1" style="border-color:yellow" />
</cfform>

HTH

January 28, 2010

see celestialkennels.com "contact us"

part of the scrip is as follows

<style type="text/css">

<!--

.style6 {
background-color: #F8E77C;
border-top: 2px inset #CCCD65;
border-right: 2px inset #CCCD65;
border-bottom: 2px inset #CCCD65;
border-left: 2px inset #CCCD65;

-->
</style>


then the input form is

<INPUT NAME="myfield" TYPE="text"  class="style6"  id="myfield" SIZE="50" MAXLENGTH="250">

you can also make input fields exact size with the style=width.... see below.

<INPUT NAME="anotherfield" TYPE="text" class="style6" id="anotherfield" style="width: 30px" SIZE="3"

the nice thing about this is you can create as many styles as u want and apply to diff. "inputs" on the same page

the "scrollbar" was done because browsers other that IE do not allow you to change scrollbar colors and IE's edited scrollbar isn't exactly stylish. the rest seems to work on all major browsers though u might have to adapt some js for indivual browsers with a detect and then say .style6s for safari in an cfif/else statement.

script for scrollbar was addapted from:

//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com

hope this helps,

andy

Inspiring
January 20, 2010

I didn't know either but was curious enough to google "html input text color".  I didn't even have to select any of the offerings to learn how to do it.