CSS distinguishing styling within input[type=text]

Question

I have a few input[type=text] fields, which I would like to customize in a different way.

I have got to know, that we can apply our styling even for the name property.

Can I apply a CSS style to an element name?

Unfortunately, it doesn't work in my case.

My code looks like this:

fig input[type=text]
        {
            width: 250px;
            min-width: 100px;
            padding: 12px 20px;
            box-sizing: border-box;
            outline: none;
            border: 1px solid #f7fbff;
            background-color: #f7fbff;
            display: inline-block; 
        }

             <figure class="fig">
            <input type="text" name="riser_cupboard_key_type" 
                                                    pattern="[A-Za-z].{4,}" 
                                                    title="The text should include at least 4 
            letters" placeholder="Enter your answer" required>
         </figure>

All thhe options beloe weren't working

 .fig input[type=text] > input[name="riser_cupboard_key_type"] {
    width: 600px;
 }

 .fig input[type=text]  input[name="riser_cupboard_key_type"] {
    width: 600px;
 }

 .fig input[name="riser_cupboard_key_type"] {
    width: 600px;
 }

How can I make only this specified input different than others?

Well, your code works for me. Maybe you have nested the input in some other elements in your original code. If that is the case please share entire code. — Atharva Sharma, Jul 08 '21 at 14:12
Duplicate of: https://stackoverflow.com/questions/12340737/specify-multiple-attribute-selectors-in-css — Amith, Jul 08 '21 at 14:20

score 0 · Accepted Answer · answered Jul 08 '21 at 14:18

0

This should work:

.fig input[type=text][name="riser_cupboard_key_type"] {
    width: 600px;
 }

answered Jul 08 '21 at 14:18

Amith

730
6
22

kiran · Answer 2 · 2021-07-08T14:41:14.307

It's working perfectly fine, You can use any attribute available to make it unique, There shouldn't be any space between attributes.

 .fig input[name="riser_cupboard_key_type"][placeholder="Enter your answer"] {
    width:400px;
    height: 2em;
    border: 2px solid crimson;
    border-radius: 3px;
 }

 <figure class="fig">
  <input type="text" name="riser_cupboard_key_type" 
   pattern="[A-Za-z].{4,}" 
   title="The text should include at least 4 letters" 
   placeholder="Enter your answer" 
   required>
</figure>

CSS distinguishing styling within input[type=text]

2 Answers2