Html Question posted in
Some basic documentation can be found here.

Html – How to Style a Text Input Field Without Affecting Other Text Input Fields?

How do I style an HTML text field without affecting the other text fields in my code? I have my text fields in a Class named "Command", which I have attempted to style with CSS. However, this styling is applied to all text fields across the application and not those within the "Command" Class.

I have tried the following:

  1. Changing the order to specify the input type and the Command Class.

  2. Removing the comma between the Command Class and input specification.

The first solution attempt did not change the result. The styling was consequently applied to all text fields.

The second solution did not change anything, and my styling for the other text fields was applied to the Command Class.

input[type = "text"], .Command {
  font-family: 'Courier New', Courier, monospace;
  font-size: larger;
  padding: 1.5%;
}

<div class="memoryCommands">
                <input type="text" class="Command" placeholder="Enter Command 1">
                <input type="text" class="Command" placeholder="Enter Command 2">
                <input type="text" class="Command" placeholder="Enter Command 3">
            </div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    @j08691 Kindly answered my question. The answer is:

    input[type = "text"].Command


  2. 0

    Try learning CSS selectors.

    I’ve just done this (recommended by The Odin Project) and it teaches you how to use them many different ways:

    https://flukeout.github.io/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search