imput field colour change

Question

Pleasant Day 0 Junior Poster in Training

13 Years Ago

Hi, I'm a beginner with html and javascript, so I try and edit other peoples free codes, Ive got some input boxes and I want to change the colour of them, they are the default white, I want them transparent, there is no code I can see that says its colour, I'm not sure what to change or put in so I can make the white part inside the input field transparent

Here is my script. you will see some white boxes, its this I'm trying to change colour.

<script language="JavaScript">


<!-- Begin
secs2 = 0;
count = 0;
allBpm = 0;
avgBpm = 0;
bpm = 0;
ns = (navigator.appName == 'Netscape');
ie = (navigator.appName == 'Microsoft Internet Explorer');
function bpmCounter(e) {
if (ns) clearBpm = e.which;
else if (ie) clearBpm = event.button;
timeSeconds = new Date;
secs = timeSeconds.getTime();
if (count == 0) {
document.BEATSPERMINUTE.AVG.value = "";
document.BEATSPERMINUTE.NOW.value = "READY!  Start NOW!";
document.BEATSPERMINUTE.HIT.value = "";
document.BEATSPERMINUTE.ACG.value = "";
document.BEATSPERMINUTE.NCG.value = "";
secs2 = secs;
count++;
}
else {
oldBpm = bpm;
bpm = (1 / ((secs - secs2) / 1000)) * 60;
bpmChg = (Math.round((bpm - oldBpm) * 10)) / 10;
count++;
allBpm = allBpm + bpm;
oldAvg = avgBpm;
avgBpm = allBpm / (count - 1);
avgChg = (Math.round((avgBpm - oldAvg) * 10)) / 10;
secs2 = secs;
if (bpmChg >= 0) { PbpmChg = "+" + bpmChg } else { PbpmChg = bpmChg }
if (avgChg >= 0) { PavgChg = "+" + avgChg } else { PavgChg = avgChg }
document.BEATSPERMINUTE.AVG.value = (Math.round(avgBpm * 100)) / 100;
document.BEATSPERMINUTE.ACG.value = PavgChg;
document.BEATSPERMINUTE.NOW.value = (Math.round(bpm * 100)) / 100;
document.BEATSPERMINUTE.NCG.value = PbpmChg;
document.BEATSPERMINUTE.HIT.value = count;
}
return true;
}
document.onkeydown = bpmCounter;
document.onmousedown = bpmCounter;
//  End -->
</script>
</head><body bgcolor="#ffffff" vlink="#0000ff">
<br>
<center>
  <br>
<br>
<basefont size="3">
<font size="+2" face="Helvetica,Arial"></font><br>
<br>
<!-- Demonstration -->
<center>
<table border="0" width="320">
<tbody><tr><td align="middle" valign="top" width="50%">
<form name="BEATSPERMINUTE">
<table bgcolor="" border="0" cellpadding="3" cellspacing="0">
<tbody><tr><td align="middle">
<table bgcolor="" border="0" cellpadding="3" cellspacing="0">
<tbody><tr><td align="middle">
<table bgcolor="transparent" border="0" cellpadding="4" cellspacing="0">
<tbody><tr><td><font color="#FFFFFF"><tt>AVERAGE BPM</tt></font></td>
<td><input gtbfieldid="19" name="AVG"></td><td><input gtbfieldid="20" 
name="ACG" size="6"></td></tr>
<tr><td><font color="#FFFFFF"><tt>ONCLICK BPM</tt></font></td>
<td><input gtbfieldid="21" name="NOW"></td><td><input gtbfieldid="22" 
name="NCG" size="6"></td></tr>
<tr><td><font color="#FFFFFF"><tt>TIMING HITS</tt></font></td>
<td><input gtbfieldid="23" name="HIT"></td><td>&nbsp;  </td></tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
<br><p>

<br><br><br><br><br><br><br><br><br>
<br><br>
<input value="RESET " type="reset">


</p></form></td></tr></tbody></table>
</center>
<p>
</p><p>
<a name="source">
</a>
<a name="source"> </a>
</p>
</center>



</body></html>

change color field javascript transparent

4 Contributors
26 Replies
408 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by Pleasant Day

All 26 Replies

almostbob 866 Retired: passive income ROCKS

13 Years Ago

ignoring all the javascript BS

<html>
<head>
<style type='text/css'>
input { background-color:transparent; }
input.red { background-color:red; }
input.blue { background-color:blue; }
</style>
</head>
<body>
<input type='text'>
<input class='red' type='text'>
<input class='blue' type='text'>
</body>
</html>

css, cascading style sheets, let you set the style of the page
javascript is more used for user interaction
the script in the sample is outdated
language='javascript' is deprecated in favor of type='text/javascript'
very outdated, netscape is long dead,
elements overlap,
the form starts inside a tr and ends outside the table
but,, if it works, it works,

Edited 13 Years Ago by almostbob because: n/a

rajarajan2017

13 Years Ago

Input field has the default attributes and not some of the options handled. For that reason CSS is there to decorate the components or fields we have in the html page. Learn CSS you can achieve more for your page with a enhanced design.

almostbob 866 Retired: passive income ROCKS

13 Years Ago

input { /* as you said, generic */  }
input:text {background-color:transparent}
input:button {background-color:blue}
input:reset {background-color:red}
input:submit {background-color:green}
input:radio { /* etc */  }

for any html_element

html_element
html_element:type (as in <input type='text'
html_element.class (as in <div class='dontprint'>
html_element#id (as in <div id='13'>

and the generic

:type
.class
#id

can all be styled individually or in combination, for size, color, layout, position, visibility, z-index(height above or below other elements), transparency, & 999 other things I havent remembered

pages that reformat to suit the output device
@media screen {body { /* bla bla bla */ }}
@media print {body { /* bla bla */ }}
@media handheld {body { /* bla */ }}

ruminate while we illuminate the possibilities

http://www.w3schools.com :: some tutorials predate current best practice, most are at least functional, and provide a background to build on

Edited 13 Years Ago by almostbob because: n/a

almostbob 866 Retired: passive income ROCKS

13 Years Ago

input:text
input:radio
input:checkbox
input:reset
input:submit
select

SKANK!!!!! 5 Posting Pro in Training

13 Years Ago

<style>
input.tags{background:transparent}
</style>
<script language="JavaScript">


<!-- Begin
secs2 = 0;
count = 0;
allBpm = 0;
avgBpm = 0;
bpm = 0;
ns = (navigator.appName == 'Netscape');
ie = (navigator.appName == 'Microsoft Internet Explorer');
function bpmCounter(e) {
if (ns) clearBpm = e.which;
else if (ie) clearBpm = event.button;
timeSeconds = new Date;
secs = timeSeconds.getTime();
if (count == 0) {
document.BEATSPERMINUTE.AVG.value = "";
document.BEATSPERMINUTE.NOW.value = "READY!  Start NOW!";
document.BEATSPERMINUTE.HIT.value = "";
document.BEATSPERMINUTE.ACG.value = "";
document.BEATSPERMINUTE.NCG.value = "";
secs2 = secs;
count++;
}
else {
oldBpm = bpm;
bpm = (1 / ((secs - secs2) / 1000)) * 60;
bpmChg = (Math.round((bpm - oldBpm) * 10)) / 10;
count++;
allBpm = allBpm + bpm;
oldAvg = avgBpm;
avgBpm = allBpm / (count - 1);
avgChg = (Math.round((avgBpm - oldAvg) * 10)) / 10;
secs2 = secs;
if (bpmChg >= 0) { PbpmChg = "+" + bpmChg } else { PbpmChg = bpmChg }
if (avgChg >= 0) { PavgChg = "+" + avgChg } else { PavgChg = avgChg }
document.BEATSPERMINUTE.AVG.value = (Math.round(avgBpm * 100)) / 100;
document.BEATSPERMINUTE.ACG.value = PavgChg;
document.BEATSPERMINUTE.NOW.value = (Math.round(bpm * 100)) / 100;
document.BEATSPERMINUTE.NCG.value = PbpmChg;
document.BEATSPERMINUTE.HIT.value = count;
}
return true;
}
document.onkeydown = bpmCounter;
document.onmousedown = bpmCounter;
//  End -->
</script>
</head><body bgcolor="#ffffff" vlink="#0000ff">
<br>
<center>
  <br>
<br>
<basefont size="3">
<font size="+2" face="Helvetica,Arial"></font><br>
<br>
<!-- Demonstration -->
<center>
<table border="0" width="320">
<tbody><tr><td align="middle" valign="top" width="50%">
<form name="BEATSPERMINUTE">
<table bgcolor="" border="0" cellpadding="3" cellspacing="0">
<tbody><tr><td align="middle">
<table bgcolor="" border="0" cellpadding="3" cellspacing="0">
<tbody><tr><td align="middle">
<table bgcolor="transparent" border="0" cellpadding="4" cellspacing="0">
<tbody><tr><td><font color="#FFFFFF"><tt>AVERAGE BPM</tt></font></td>
<td><input class="tags" gtbfieldid="19" name="AVG"></td><td><input class="tags" gtbfieldid="20" 
name="ACG" size="6"></td></tr>
<tr><td><font color="#FFFFFF"><tt>ONCLICK BPM</tt></font></td>
<td><input class="tags" gtbfieldid="21" name="NOW"></td><td><input class="tags" gtbfieldid="22" 
name="NCG" size="6"></td></tr>
<tr><td><font color="#FFFFFF"><tt>TIMING HITS</tt></font></td>
<td><input class="tags" gtbfieldid="23" name="HIT"></td><td>&nbsp;  </td></tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
<br><p>

<br><br><br><br><br><br><br><br><br>
<br><br>
<input value="RESET " type="reset">


</p></form></td></tr></tbody></table>
</center>
<p>
</p><p>
<a name="source">
</a>
<a name="source"> </a>
</p>
</center>



</body></html>

have no idea what the heck this code is as i tested it on my website, but i just added the class names to the inputs and the css code to style them transparent, of course u know that if u want them to change color onfocus or onmouseover ur going to have to use the first codes i provided(my first post) with the

onfocus="this.style.color='pink';"

kind of thing

Pleasant Day commented: helpfull poster +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Pleasant Day 0 Junior Poster in Training · Answer 1 · 2010-05-05T22:32:11+00:00

I added the

input { background-color:transparent; }

It makes the imput boxes in the code transparent which is great, but there is a button at the bottom of the page, thats also been made transparent, so Im thinking the word imput means anything that has an imput, buttons raid buttons, check boxes everything, so I think I may need to be more specific, its the boxes that display the info, not sure what these are called, I had a page the other day that had every different type of imput field but I cant find it, perhaps there is a special name for imput boxes, ive no idea as I cant find the page, which is a nuisance as its useful knowing all the elements for imputs that can be in a page. Here is the code and how I put the code in I was given here.

<html>
<head>
<style type='text/css'>
input { background-color:transparent; }
</style>
</head>
<body>

<script language="JavaScript">


<!-- Begin
secs2 = 0;
count = 0;
allBpm = 0;
avgBpm = 0;
bpm = 0;
ns = (navigator.appName == 'Netscape');
ie = (navigator.appName == 'Microsoft Internet Explorer');
function bpmCounter(e) {
if (ns) clearBpm = e.which;
else if (ie) clearBpm = event.button;
timeSeconds = new Date;
secs = timeSeconds.getTime();
if (count == 0) {
document.BEATSPERMINUTE.AVG.value = "";
document.BEATSPERMINUTE.NOW.value = "READY!  Start NOW!";
document.BEATSPERMINUTE.HIT.value = "";
document.BEATSPERMINUTE.ACG.value = "";
document.BEATSPERMINUTE.NCG.value = "";
secs2 = secs;
count++;
}
else {
oldBpm = bpm;
bpm = (1 / ((secs - secs2) / 1000)) * 60;
bpmChg = (Math.round((bpm - oldBpm) * 10)) / 10;
count++;
allBpm = allBpm + bpm;
oldAvg = avgBpm;
avgBpm = allBpm / (count - 1);
avgChg = (Math.round((avgBpm - oldAvg) * 10)) / 10;
secs2 = secs;
if (bpmChg >= 0) { PbpmChg = "+" + bpmChg } else { PbpmChg = bpmChg }
if (avgChg >= 0) { PavgChg = "+" + avgChg } else { PavgChg = avgChg }
document.BEATSPERMINUTE.AVG.value = (Math.round(avgBpm * 100)) / 100;
document.BEATSPERMINUTE.ACG.value = PavgChg;
document.BEATSPERMINUTE.NOW.value = (Math.round(bpm * 100)) / 100;
document.BEATSPERMINUTE.NCG.value = PbpmChg;
document.BEATSPERMINUTE.HIT.value = count;
}
return true;
}
document.onkeydown = bpmCounter;
document.onmousedown = bpmCounter;
//  End -->
</script>
</head><body bgcolor="#ffffff" vlink="#0000ff">
<br>
<center>
  <br>
<br>
<basefont size="3">
<font size="+2" face="Helvetica,Arial"></font><br>
<br>
<!-- Demonstration -->
<center>
<table border="0" width="320">
<tbody><tr><td align="middle" valign="top" width="50%">
<form name="BEATSPERMINUTE">
<table bgcolor="" border="0" cellpadding="3" cellspacing="0">
<tbody><tr><td align="middle">
<table bgcolor="" border="0" cellpadding="3" cellspacing="0">
<tbody><tr><td align="middle">
<table bgcolor="transparent" border="0" cellpadding="4" cellspacing="0">
<tbody><tr><td><font color="#FFFFFF"><tt>AVERAGE BPM</tt></font></td>
<td><input gtbfieldid="19" name="AVG"></td><td><input gtbfieldid="20" 
name="ACG" size="6"></td></tr>
<tr><td><font color="#FFFFFF"><tt>ONCLICK BPM</tt></font></td>
<td><input gtbfieldid="21" name="NOW"></td><td><input gtbfieldid="22" 
name="NCG" size="6"></td></tr>
<tr><td><font color="#FFFFFF"><tt>TIMING HITS</tt></font></td>
<td><input gtbfieldid="23" name="HIT"></td><td>&nbsp;  </td></tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
<br><p>

<br><br><br><br><br><br><br><br><br>
<br><br>
<input value="RESET " type="reset">


</p></form></td></tr></tbody></table>
</center>
<p>
</p><p>
<a name="source">
</a>
<a name="source"> </a>
</p>
</center>


</body>
</html>

Pleasant Day 0 Junior Poster in Training · Answer 2 · 2010-05-09T06:35:33+00:00

I'm looking around that link, I cant find what the input boxes are called, I had a page a few days back that had the names of all the different input names and types, buttons, radio button, input fields etc etc, I cant find it any place, annoyingly as Its very useful to know what all these elements are called, so I don't know what these boxes in my code examples are called, so I cant add the

input:whateverthose5whiteboxesarecalled {background-color:transparent}

Perhaps they can be named by their name, I notice this in the code
gtbfieldid="22" so perhaps they can be named individually, Ive got no idea, and I don't know what these boxes are called, its better to learn by example, If I see what its supposed to say I learn a lot better as I can see what its supposed to say in the code. One learns by example.

Pleasant Day 0 Junior Poster in Training · Answer 3 · 2010-05-09T06:48:13+00:00

Im guessing the 5 boxes are text imputs, I put this and it does nothing?

<html>
<head>
<style type='text/css'>
input:text { background-color:transparent; }
</style>
</head>
<body>

almostbob 866 Retired: passive income ROCKS · Answer 4 · 2010-05-09T07:21:38+00:00

incorrect

<input gtbfieldid="21" name="NOW">

correct

<input type='text' gtbfieldid="21" name="NOW">

requires a type

text field is <input type='text' name= radio button set is <input type='radio' name= checkbox is <input type='checkbox' name= reset button <input type='reset' submit button is <input type='submit' required attributes type name

a good code editor would not permit you to make this error,
as soon as you type <input
a good editor completes it to <input type="

a blatant plug for notepad++ for which I sadly do not get a kickback

online look at w3schools.com, devguru.com for tutorials and code samples
there are a lot of online courses and hints,

Edit:: didnt notice the omission of type initially,
but first reply did include type attributes
editor corrected the code as it were pasted in,
apologies,

Pleasant Day 0 Junior Poster in Training · Answer 5 · 2010-05-09T07:30:18+00:00

This is getting over my head, I just want those 5 boxes transparent and not white and the button leaving alone, Im not a html coder or javascripter, I use other peoples code. So this is going straight over my head here. I just want to know what the css code is to do this.

almostbob 866 Retired: passive income ROCKS · Answer 6 · 2010-05-09T07:35:52+00:00

incorrect

<input gtbfieldid="21" name="NOW">

correct

<input type='text' gtbfieldid="21" name="NOW

requires a type

dont get grumpy
the Q shows exactly what you have to change

input field REQUIRES A TYPE

likely your button requires a type too, its a 'submit' perhaps
incorrect markup fails interestingly in browsers. Quirks mode does not display well, often does not display at all
the recommended fixes, to add the required type to the input fields and
now
to any other fields that have required attributes,

whether you DO it is up to you
but your site dont work
mine do
you havent any other answer

Pleasant Day 0 Junior Poster in Training · Answer 7 · 2010-05-10T07:10:31+00:00

I tried the code you said, see below. It doesnt work. it makes nothing transparent.

<html>
<head>
<style type='text/css'>
input { background-color:transparent; }
</style>
</head>
<body>

<script language="JavaScript">


<!-- Begin
secs2 = 0;
count = 0;
allBpm = 0;
avgBpm = 0;
bpm = 0;
ns = (navigator.appName == 'Netscape');
ie = (navigator.appName == 'Microsoft Internet Explorer');
function bpmCounter(e) {
if (ns) clearBpm = e.which;
else if (ie) clearBpm = event.button;
timeSeconds = new Date;
secs = timeSeconds.getTime();
if (count == 0) {
document.BEATSPERMINUTE.AVG.value = "";
document.BEATSPERMINUTE.NOW.value = "READY!  Start NOW!";
document.BEATSPERMINUTE.HIT.value = "";
document.BEATSPERMINUTE.ACG.value = "";
document.BEATSPERMINUTE.NCG.value = "";
secs2 = secs;
count++;
}
else {
oldBpm = bpm;
bpm = (1 / ((secs - secs2) / 1000)) * 60;
bpmChg = (Math.round((bpm - oldBpm) * 10)) / 10;
count++;
allBpm = allBpm + bpm;
oldAvg = avgBpm;
avgBpm = allBpm / (count - 1);
avgChg = (Math.round((avgBpm - oldAvg) * 10)) / 10;
secs2 = secs;
if (bpmChg >= 0) { PbpmChg = "+" + bpmChg } else { PbpmChg = bpmChg }
if (avgChg >= 0) { PavgChg = "+" + avgChg } else { PavgChg = avgChg }
document.BEATSPERMINUTE.AVG.value = (Math.round(avgBpm * 100)) / 100;
document.BEATSPERMINUTE.ACG.value = PavgChg;
document.BEATSPERMINUTE.NOW.value = (Math.round(bpm * 100)) / 100;
document.BEATSPERMINUTE.NCG.value = PbpmChg;
document.BEATSPERMINUTE.HIT.value = count;
}
return true;
}
document.onkeydown = bpmCounter;
document.onmousedown = bpmCounter;
//  End -->
</script>
</head><body bgcolor="#ffffff" vlink="#0000ff">
<br>
<center>
  <br>
<br>
<basefont size="3">
<font size="+2" face="Helvetica,Arial"></font><br>
<br>
<!-- Demonstration -->
<center>
<table border="0" width="320">
<tbody><tr><td align="middle" valign="top" width="50%">
<form name="BEATSPERMINUTE">
<table bgcolor="" border="0" cellpadding="3" cellspacing="0">
<tbody><tr><td align="middle">
<table bgcolor="" border="0" cellpadding="3" cellspacing="0">
<tbody><tr><td align="middle">
<table bgcolor="transparent" border="0" cellpadding="4" cellspacing="0">
<tbody><tr><td><font color="#FFFFFF"><tt>AVERAGE BPM</tt></font></td>
<td><input gtbfieldid="19" name="AVG"></td><td><input gtbfieldid="20" 
name="ACG" size="6"></td></tr>
<tr><td><font color="#FFFFFF"><tt>ONCLICK BPM</tt></font></td>
<td><input type='text' gtbfieldid="21" name="NOW"><input type='text' gtbfieldid="21" name="NOW"></td><td><input gtbfieldid="22" 
name="NCG" size="6"></td></tr>
<tr><td><font color="#FFFFFF"><tt>TIMING HITS</tt></font></td>
<td><input gtbfieldid="23" name="HIT"></td><td>&nbsp;  </td></tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
<br><p>

<br><br><br><br><br><br><br><br><br>
<br><br>
<input value="RESET " type="reset">


</p></form></td></tr></tbody></table>
</center>
<p>
</p><p>
<a name="source">
</a>
<a name="source"> </a>
</p>
</center>


</body>
</html>

I went back to the original one you said. It makes all imputs transparent, the 5 boxes and the button, didnt want that for the button, but lets go ahead as thats the best Ive got, works on normal browsers, all be it with a transparent button as well, but when loaded into mobile devices, which is what this is for, it breaks the code, the imput fields dont show the results, so the code gets broken for mobiles with what you said to add.

<html>
<head>
<style type='text/css'>
input { background-color:transparent; }
</style>
</head>
<body>

<script language="JavaScript">


<!-- Begin
secs2 = 0;
count = 0;
allBpm = 0;
avgBpm = 0;
bpm = 0;
ns = (navigator.appName == 'Netscape');
ie = (navigator.appName == 'Microsoft Internet Explorer');
function bpmCounter(e) {
if (ns) clearBpm = e.which;
else if (ie) clearBpm = event.button;
timeSeconds = new Date;
secs = timeSeconds.getTime();
if (count == 0) {
document.BEATSPERMINUTE.AVG.value = "";
document.BEATSPERMINUTE.NOW.value = "READY!  Start NOW!";
document.BEATSPERMINUTE.HIT.value = "";
document.BEATSPERMINUTE.ACG.value = "";
document.BEATSPERMINUTE.NCG.value = "";
secs2 = secs;
count++;
}
else {
oldBpm = bpm;
bpm = (1 / ((secs - secs2) / 1000)) * 60;
bpmChg = (Math.round((bpm - oldBpm) * 10)) / 10;
count++;
allBpm = allBpm + bpm;
oldAvg = avgBpm;
avgBpm = allBpm / (count - 1);
avgChg = (Math.round((avgBpm - oldAvg) * 10)) / 10;
secs2 = secs;
if (bpmChg >= 0) { PbpmChg = "+" + bpmChg } else { PbpmChg = bpmChg }
if (avgChg >= 0) { PavgChg = "+" + avgChg } else { PavgChg = avgChg }
document.BEATSPERMINUTE.AVG.value = (Math.round(avgBpm * 100)) / 100;
document.BEATSPERMINUTE.ACG.value = PavgChg;
document.BEATSPERMINUTE.NOW.value = (Math.round(bpm * 100)) / 100;
document.BEATSPERMINUTE.NCG.value = PbpmChg;
document.BEATSPERMINUTE.HIT.value = count;
}
return true;
}
document.onkeydown = bpmCounter;
document.onmousedown = bpmCounter;
//  End -->
</script>
</head><body bgcolor="#ffffff" vlink="#0000ff">
<br>
<center>
  <br>
<br>
<basefont size="3">
<font size="+2" face="Helvetica,Arial"></font><br>
<br>
<!-- Demonstration -->
<center>
<table border="0" width="320">
<tbody><tr><td align="middle" valign="top" width="50%">
<form name="BEATSPERMINUTE">
<table bgcolor="" border="0" cellpadding="3" cellspacing="0">
<tbody><tr><td align="middle">
<table bgcolor="" border="0" cellpadding="3" cellspacing="0">
<tbody><tr><td align="middle">
<table bgcolor="transparent" border="0" cellpadding="4" cellspacing="0">
<tbody><tr><td><font color="#FFFFFF"><tt>AVERAGE BPM</tt></font></td>
<td><input gtbfieldid="19" name="AVG"></td><td><input gtbfieldid="20" 
name="ACG" size="6"></td></tr>
<tr><td><font color="#FFFFFF"><tt>ONCLICK BPM</tt></font></td>
<td><input gtbfieldid="21" name="NOW"></td><td><input gtbfieldid="22" 
name="NCG" size="6"></td></tr>
<tr><td><font color="#FFFFFF"><tt>TIMING HITS</tt></font></td>
<td><input gtbfieldid="23" name="HIT"></td><td>&nbsp;  </td></tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
<br><p>

<br><br><br><br><br><br><br><br><br>
<br><br>
<input value="RESET " type="reset">


</p></form></td></tr></tbody></table>
</center>
<p>
</p><p>
<a name="source">
</a>
<a name="source"> </a>
</p>
</center>


</body>
</html>

So at the moment nothing is useable, now Im not sure if Ive added what you intended, if I did it wrong, I dont really know.

rajarajan2017 · Answer 8 · 2010-05-10T12:01:27+00:00

<style type='text/css'>
input[B]:text [/B]{ background-color:transparent; }
</style>

Pleasant Day 0 Junior Poster in Training · Answer 9 · 2010-05-10T20:36:45+00:00

<style type='text/css'>
input:text { background-color:transparent; }
</style>

tried that, Thats stops anything from being transparent, so that solution doesnt work.

rajarajan2017 · Answer 10 · 2010-05-10T21:08:21+00:00

The above code work for me with think text outline, you also need to hide thin outline.

Pleasant Day 0 Junior Poster in Training · Answer 11 · 2010-05-11T01:18:04+00:00

Ill try it on my mac instead of the PC, my PC has been playing up with java and javascript.

Pleasant Day 0 Junior Poster in Training · Answer 12 · 2010-05-12T04:49:48+00:00

Right, tested on two computers, no it doesn't work, adding :text breaks the code, it makes nothing transparent, Ive tried it both with my original code and with that other little bit almostbob said, no it does not work, no solutions suggested have worked. I never thought it would be so difficult.

If anyone is advanced enough to solve this one I would love to hear your solution. Here is a web link to check the code online
http://writecodeonline.com/javascript/
That way you can 'see' if you can solve the case. Post all the code in and see if it works, otherwise random solutions get lost on exactly what was supposed to be done and may not of been followed correctly by myself.

SKANK!!!!! 5 Posting Pro in Training · Answer 13 · 2010-05-12T11:17:45+00:00

im sorry, but the simplest way to do it is my way, which is

<input style="background:transparent" onfocus="this.style.background='black';this.style.color='#ffaacc';" onchange="this.style.background='transparent';this.style.color='black';">

which can be done for "like" all elements

almostbob 866 Retired: passive income ROCKS · Answer 14 · 2010-05-12T16:42:15+00:00

jvascript should not be used for this purpose
javascript is disabled as a security risk on a large %age of browsers
the code scrap supplied is incorrect,
it handles onfocus, but does not handle onblur

SKANK!!!!! 5 Posting Pro in Training · Answer 15 · 2010-05-12T17:07:34+00:00

thanks for reminding me about onblur. that was just added stuff its not incorrct anyways. this is a javascript forum. if u want css, which u have no reason to post all that code really if u just want a transparent background for a few input boxes.. then its done like this(this is a javascript forum tho.. ok)

input.tags{width:255px;background:transparent}
<input class="tags">

Pleasant Day 0 Junior Poster in Training · Answer 16 · 2010-05-12T18:44:07+00:00

No, doesnt work, like I said, go here test the code

http://writecodeonline.com/javascript/

Otherwise, I'm testing every suggestion from anyone ones guess that comes to mind, I also have to start using different computers incase its my machine, and I end up on a wild goose chase, please, if you know they answer post all the code and test it in the link, then you know for sure, otherwise its blind guesses.

SKANK!!!!! 5 Posting Pro in Training · Answer 17 · 2010-05-13T01:22:21+00:00

no, i have testd it on my website. that site doesnt let u do two kinds of things at once, did u really think that both lines of text i provided are both css or both javascript? rr u that much of a noob? my code works, you must be new.

almostbob 866 Retired: passive income ROCKS · Answer 18 · 2010-05-13T02:19:02+00:00

thanks for reminding me about onblur. that was just added stuff its not incorrct anyways. this is a javascript forum. if u want css, which u have no reason to post all that code really if u just want a transparent background for a few input boxes.. then its done like this(this is a javascript forum tho.. ok)
input.tags{width:255px;background:transparent}
<input class="tags">

without casting any rocks,
the forum is javascript, does not make the solution best done in javascript
lots of questions get asked, and answers given, that would be better asked in another forum,
SQL in php,
presentation in javascript

there is always another way, sometimes a better way, always a better way than inline anything for every tag,
maintenance becomes horrible

SKANK!!!!! 5 Posting Pro in Training · Answer 19 · 2010-05-13T02:45:53+00:00

why r u hasseling me? i gave a css code and a javascript code! thats the only reasonable ways to d it! its simple! u do it another way, youve blown t out of porportion! its so insane that anyone would idsagree with me!

Pleasant Day 0 Junior Poster in Training · Answer 20 · 2010-05-14T19:23:07+00:00

SKANK!!!!! - could you post the code and my javascript all together, that way I know 'for sure' it is exactly the right code, I would love to mark this one as solved, I want to check if your the one that managed to finally work it out in the end.

Pleasant Day 0 Junior Poster in Training · Answer 21 · 2010-05-17T18:44:53+00:00

Sorry for the delay I was away, I tried the code from SKANK!!!!! and it worked, so a special big thank you to you, thank you for your help, its appreciated a lot, also thank you everyone else who offered suggestions, I appreciate your time and effort you gave.

imput field colour change

Recommended Answers Collapse Answers

All 26 Replies

Recommended Answers