make form box invisible or transparent

[Pleasant Day]

I am new to javascript, my skills are very limited, so I use the great scripts I see posted on the net by experianced javascript users.

I have this script that picks lottery numbers, the numbers it generates are in a little box, but the problem is the box has a border and is white inside the border, I want the border and the white colour inside the box to be transparent, as I dont need them to be seen.

here is the script.

<script language="JavaScript" type="text/javascript">
<!-- Begin
function numbers() {
var nummenu = document.lotto.numbercount;
var numbercount = nummenu.options[nummenu.selectedIndex].value*1;
var maxnumbers = document.lotto.maxnum.value*1;
if (numbercount > maxnumbers) {
alert("Be sure to select a max lottery number value!");
}
else {
var ok = 1;
r = new Array (numbercount);
for (var i = 1; i <= numbercount; i++) {
r[i] = Math.round(Math.random() * (maxnumbers-1))+1;
}
for (var i = numbercount; i >= 1; i--) {
for (var j = numbercount; j >= 1; j--) {
if ((i != j) && (r[i] == r[j])) ok = 0; 
   }   
}
if (ok) {
var output = "";
for (var k = 1; k <= numbercount; k++) {
output += "Number " + k + " = " + r[k] + "\n";
}
document.lotto.results.value = output;
}     
else numbers();
   }
}
//  End -->
</script>

<form name="lotto">
      <div align="center"><center><table border="0">
        <tbody><tr>
          <td align="center">Pick <select name="numbercount" size="1">
            <option value="1">1 </option>
            <option value="2">2 </option>
            <option value="3">3 </option>
            <option value="4">4 </option>
            <option value="5">5 </option>
            <option value="6" selected="selected">6 </option>
            <option value="7">7 </option>
            <option value="8">8 </option>
            <option value="9">9 </option>
            <option value="10">10 </option>
          </select> numbers<br>
          from 1 through <input name="maxnum" value="49" size="2" maxlength="2" type="text"><br>
          <input value="Pick Numbers" onclick="numbers()" type="button"><p><textarea name="results" rows="11" cols="15"></textarea> </p></td>
        </tr>
      </tbody></table>
      </center></div>
    </form>

What is to be done so one doesnt see the border or inside the border, what code can we add to solve the problem.

[Thirusha]

Firstly the border that surrounded the text area is the default border visible in the browser.

To get rid of that u need to add a style attribute to the textarea tag, something like this:

<textarea style="border:none" name="results" rows="11" cols="15"></textarea>

[Pleasant Day]

Thank you for your answer, could you show me please where that would go in my original code, I'm still learning.

[Thirusha]

A bit lazy arent we ??? I have some time to kill so i shall do this but it is pretty simple, all u had to do was look for the same tags that i hade given u earlier.
Replace the text in red with the text provided in my other message

<form name="lotto">
      <div align="center"><center><table border="0">
        <tbody><tr>
          <td align="center">Pick <select name="numbercount" size="1">
            <option value="1">1 </option>
            <option value="2">2 </option>
            <option value="3">3 </option>
            <option value="4">4 </option>
            <option value="5">5 </option>
            <option value="6" selected="selected">6 </option>
            <option value="7">7 </option>
            <option value="8">8 </option>
            <option value="9">9 </option>
            <option value="10">10 </option>
          </select> numbers<br>
          from 1 through <input name="maxnum" value="49" size="2" maxlength="2" type="text"><br>
          <input value="Pick Numbers" onclick="numbers()" type="button"><p><textarea name="results" rows="11" cols="15"></textarea> </p></td>
        </tr>
      </tbody></table>
      </center></div>
    </form>

[Pleasant Day]

Its not that I am lazy, but that my knowledge is very limited, so I learn by examples.

Thank you for your code, it fixed the border, but the inside white colour is still visible, can that be got rid of? I need the background underneath to be visible, but as there is a white box this isn't possible, can the white box be made transparent or got rid off so it is not visible.

[Pleasant Day]

I tried this

style="visibility:hidden"

Makes everything invisible, text as well.
So I perhaps need a command for the white bit in the button/form, whatever thats called.
Any answers to this one? whats the command I need to make this work?

[Thirusha]

try this

background-color: transparent

your textarea tag should look something like this:

<textarea style="border:none; background-color: transparent" name="results" rows="11" cols="15"></textarea>

[Pleasant Day]

That works, how do I shunt the text to the right, I need to have some space at the start at the left border so the text is over to the right a bit more.

Also we have the problem with this here, see image, that needs getting rid off.

[IMG]http://img217.imageshack.us/img217/4272/makehappytimes4.jpg[/IMG]

ignore the happy face, the background was for something else. as can be seen in the image, text needs shunting to the left, and the green circle shows an icon thing that needs getting rid off.

[Thirusha]

That works, how do I shunt the text to the right, I need to have some space at the start at the left border so the text is over to the right a bit more.

try adding padding-left to the style attribute of the text area, something like this:

style="padding-left:5px"

Also we have the problem with this here, see image, that needs getting rid off.

[IMG]http://img217.imageshack.us/img217/4272/makehappytimes4.jpg[/IMG]

ignore the happy face, the background was for something else. as can be seen in the image, text needs shunting to the left, and the green circle shows an icon thing that needs getting rid off.

Can u include the entire code that u are using for that page, i suspect somewhere there is an comment that isnt commented properly.