CODEWITHSUNDEEP
htmlcss
sun
sun

Reputation: 1668

how to disable inheriting style from other div?

hi i have three input field when i use these field seperately i'm seeing a normal input fields. Here it is 

<div id="test">
<ul>
    <li> field1 <input type="text" name="n1"  value=""></li>
    <li> field2 <input type="text" name="n2"   value=""></li> 
    <li> field3 <textarea name="mes" rows="4" cols="25"></textarea></li> 
    <li><input type="submit" name="s" value="submit"></li>
</ul>
</div>

when i use this things inside some other div i'm experiencing very large input fields and names(text).i guess this is inheriting size from other divs.i don't know what happening here. i want it to be normal as it was when used separately even if i put it inside another div.What should i do for that. Thanks

Upvotes: 1

Views: 110

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157334

You cannot disable inheriting styles as of now, what you can do is override these styles..

<div id="test" class="override">
   <ul>
      <li> field1 <input type="text" name="n1" value=""></li>
      <li> field2 <input type="text" name="n2" value=""></li> 
      <li> field3 <textarea name="mes" rows="4" cols="25"></textarea></li> 
      <li><input type="submit" name="s" value="submit"></li>
   </ul>
</div>

CSS

#test.override input[type=text] {
  /* Override here */
}

Am using #test.override so that specificity gets higher..

Demo

Demo 2 (Override in action)

Upvotes: 5

Vladimir
Vladimir

Reputation: 387

Just put width: auto; property to your inputs in css , this will prevent inheriting.

Upvotes: 1

Related Questions