Mehrere CSS-Klasse auf Divs

Question

Ich habe diese Div-Struktur und ich möchte eine CSS-Klasse auf der Eingabe festlegen, aber es funktioniert nicht.

<div class="form-group"> 
    <label for="tbxName">Name:</label> 
    <div class="input-group"> 
     <i class="input-group-addon fa fa-id-card-o" aria-hidden="true"></i> 
     <form:input type="text" path="name" class="form-control errorValidation" id="tbxName" placeholder="Name"></form:input> 
    </div> <!-- .input-group --> 
</div> <!-- form-group--> 

Das ist mein Stil:

.form-control.errorValidation { 
    border-color: 1px solid red; 
} 

Answer 1

verwenden CSS.

.form-control.errorValidation 
{ 
    border: 1px solid red; 
} 

AKTUALISIERT verwenden html.

<div class="form-group"> 
<label for="tbxName">Name:</label> 
<div class="input-group"> 
    <i class="input-group-addon fa fa-id-card-o" aria-hidden="true"></i> 
    <input type="text" path="name" class="form-control errorValidation" id="tbxName" placeholder="Name"> 
    </div> <!-- .input-group --> 
</div> <!-- form-group--> 

Answer 2

Versuchen Sie, am Eingabe-Tag zu arbeiten.

input[type="text"] 
{ 
    -webkit-appearance: textfield; 
    background-color: white; 
    -webkit-rtl-ordering: logical; 
    user-select: text; 
    cursor: auto; 
    padding: 1px; 
    border-width: 4px; 
    border-style: inset; 

    border-image: initial; 
    border-color: 1px solid red; 
} 

Answer 3

Vielleicht kann dieses Beispiel Sie Grund über die Arten helfen und wie sie kaskadieren. Es sieht so aus, als gäbe es mehr zu Ihrer Vorlage - und dass Sie möglicherweise ein Framework verwenden -, so dass Sie wahrscheinlich die Stile überschreiben müssen, die durch das Thema oder was auch immer Sie verwenden. Um dies zu tun, müssen Sie einen spezifischeren Selektor erstellen. Sie können die Entwickler-Tools verwenden, um zu sehen, wie komplex der Selektor derzeit ist ... entweder einen spezifischeren Selektor erstellen, um die Stile zu überschreiben ... oder das Markup so anzupassen, dass eine sauberere Menge von Klassen zum Stil haben.

So würde ich ein Formular angehen.

https://jsfiddle.net/sheriffderek/at2m1r6v/

Markup

<form action='' class='form-name'> 

    <ul class='field-list'> 

    <li class='field field-name'> 
     <label class='input-wrapper' for='input-id-1'> 
     <span class='label'>Label 1:</span> 
     <input class='input text' type='text' id='input-id-1' placeholder='...'/> 
     </label> 
    </li> 

    <li class='field field-name error'> 
     <label class='input-wrapper' for='input-id-2'> 
     <span class='label'>Label 2:</span> 
     <input class='input text' type='text' id='input-id-2' placeholder='...'/> 
     </label> 
    </li> 

    </ul> 

    <input class='submit' type='submit' /> 

</form> 

Arten

/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ 

/* apply a natural box layout model to all elements, but allowing components to change */ 
html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.field-list .field { 
    margin-bottom: 1rem; 
} 

.field { 
    border: 1px solid red; 
    max-width: 300px; 
    padding: .3rem; 
} 

.field .input-wrapper { 
    /* I would just write .input-w */ 
    display: block; /* <label> is inline be default */ 
    border: 1px solid blue; 
    /* click the label - to see how the input focuses */ 
    padding: .3rem; 
} 

.input-wrapper .label, .input-wrapper .input { 
    display: block; /* both inline be default */ 
    width: 100%; 
    border: 1px solid green; 
} 

.input-wrapper .label { 
    font-size: 13px; 
    margin-bottom: .3rem; 
} 

.input-wrapper .input.text { 
    font-size: 16px; 
    padding: .4rem .5rem; 
} 

.submit { 
    margin-top: 1rem; 
} 

.field.error { 
    background: rgba(255,0,0,.3); 
}