0

I want the textboxes to have the same color and the same size. However, the textboxes don't seem to change when I do the CSS. I also would like to know how to do it for multiple textboxes as I'm planning to add a lot more textboxes.

My CSS:

   .TxtBox + .TxtBox{
              border-style: none;
              border-color: inherit;
              border-width: 0;
              position:absolute;
              outline: 0;
              height: 25px;
              width:530px;
              padding-left: 10px;
              background-color: rgb(204, 204, 204);
              top: 25px;
              left: 165px;
          }

And this is my Html using the Asp.Net framework:

   <asp:TextBox class ="TxtBox" ID="TextBox2" runat="server" Height="20px"></asp:TextBox>

  <asp:TextBox class="TxtBox" ID="TextBox1" runat="server" Height="16px"></asp:TextBox>
Saswat Mishra
  • 1
  • 1
  • does this answer your question https://stackoverflow.com/questions/4113965/css-selector-for-text-input-fields Alse U should use CssClass attribute – duerzd696 Mar 31 '22 at 20:54
  • I tried that but both the textboxes end up on top of each other and can't be separated. – Saswat Mishra Apr 01 '22 at 01:32

1 Answers1

-1

The "+" operator means "only the first child", so:

.TxtBox + .TxtBox{

means that you want to apply the style to the first textbox inside a textbox (assuming you set the class TxtBox to all of them)

Since you want to apply the style to all of the elements with that class, just do:

   .TxtBox {
Ricardo Aranguren
  • 349
  • 1
  • 10
  • The following may be helpful: https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_pluss – Tu deschizi eu inchid Mar 31 '22 at 21:01
  • I tried .TxtBox but then both of the textboxes were in the same position at all times and I couldn't separate them – Saswat Mishra Apr 01 '22 at 01:15
  • That is because you have set the position "abolute" and indicated "top" and "left" properties. Your code says that you want all textboxes in the same spot of the screen. If you don't want this, then use a container div with the absolute position and remove those properties from the individual text boxes. – Ricardo Aranguren Apr 01 '22 at 08:24