CODEWITHSUNDEEP
htmlcss
Chay
Chay

Reputation: 57

Multiple CSS class on divs

I have this div structure and I want to set a CSS class on the input, but it doesn't work.

<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-->

This is my style:

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

Upvotes: 0

Views: 242

Answers (3)

sheriffderek
sheriffderek

Reputation: 9043

Maybe this example can help you reason about the styles and how they cascade. It looks like there is more to your template - and that you may be using a framework - so you likely need to override the styles provided by the theme or whatever you are using. To do that, you'll have to create a more specific selector. You can use the developer tools to see how complex the selector is currently... either create a more specific selector to override the styles... or amend the markup to have a cleaner set of classes to style with.

This is how I would approach a form.

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>


styles

/* 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);
}

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 806

Try Working on the Input Tag.

   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;
}

Upvotes: 0

phpguest
phpguest

Reputation: 804

Use this css.

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

UPDATED Use this 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-->

Upvotes: 2

Related Questions