Unable to change TextBox color?

Question

Here's a TextBox:

<asp:TextBox ID="UsernameTextBox" runat="server" class="BlockInput"></asp:TextBox>

I wanna give an asp textbox some color but its not changing color

 <script type="text/javascript">
     function BlockInput() {
         var elements = document.getElementsByClassName("BlockInput");
         for (var i = 0; i < elements.length; i++) {
             elements[i].readOnly = true; // works
             elements[i].style.color = "#000000";// does not work!
         }
     }
     window.onload = BlockInput;
</script>

When I view source I could see the style being added:

<input name="ctl00$MainContent$UsernameTextBox" 
       type="text" id="MainContent_UsernameTextBox"
       class="BlockInput" readonly="" style="color: rgb(0, 0, 0);">

I also made sure nothing is overwriting the css.

Just a remark on best practice: http://stackoverflow.com/questions/559150/best-practice-for-using-window-onload — Erik Christianson, Sep 30 '13 at 14:33

Kiranramchandran · Accepted Answer · 2013-09-30T14:43:06.393

3

change

elements[i].style.color = "#000000";

to

elements[i].style.backgroundColor= "#000000";

hope this will help you.

<script type="text/javascript">
     function BlockInput() {
var elements=document.getElementsByTagName('input');
         for (var i = 0; i < elements.length; i++) {
             elements[i].readOnly = true; // works
             elements[i].style.backgroundColor= "#000000";
         }
     }
     window.onload = BlockInput;
</script>

edited Sep 30 '13 at 14:43

answered Sep 30 '13 at 14:36

Kiranramchandran

2,094
16
30

It's backgroundColor and not background-color. – emerson.marini Sep 30 '13 at 14:39

Paul Rad · Answer 2 · 2013-09-30T14:47:17.443

1

The variable elements is undefined. Do you want to make something like ? :

function BlockInput() {
         var elements = document.getElementsByTagName('input');
         for (var i = 0; i < elements.length; i++) {
             elements[i].readOnly = true; // works
             elements[i].style.color = "#000000";// does not work!
         }
     }

Fiddle

edited Sep 30 '13 at 14:47

answered Sep 30 '13 at 14:32

Paul Rad

4,820
1
22
23

Your answer was very close, TagName needed to be uppercase, but I will give you upvote – meda Sep 30 '13 at 14:49

score 0 · Answer 3 · answered Sep 30 '13 at 14:34

0

With the color style you are setting the text color to black. If you want to change the background color of the textarea, try this:

elements[i].style.backgroundColor = "#000000";

answered Sep 30 '13 at 14:34

Speedy

198
1
8

Unable to change TextBox color?

3 Answers3