Remove a style from a class in CSS

Question

I have a input tag with this class that get it from kendostyle

<input class="k-textbox k-input" >

and the k-input class is:

.k-input{
    height: 2.214em;
    line-height: 2.214em;
    padding: .177em 0;
    text-indent: .8em;
    border: 0;
    margin: 0;
}

Now, I don't want the style

height: 2.214em;

In this class , how can I do this?

I can't edit this class is css file because it is used in some other tags

Answer 1

add this way other css

.k-textbox.k-input{height:auto;}

Answer 2

If you don't want style for particular line, you can use inline css to

override the css

<input class="k-textbox k-input"  style="height: auto;">

Answer 3

add parent div then style like

<div class="parent">
  <input class="k-textbox k-input" >
</div>

.parent > .k-input{
  height: auto;
}

Answer 4

Changing the property to an empty string appears to do the job.

$(".k-input").css("height", "");

Answer 5

Add once static div and wrap text box in div.

Try this..

<div class="cstm-input">
<input class="k-textbox k-input" />
</div>


div.cstm-input .k-input{
    height: auto !important;
}

You can do this by jQuery also..

I hope it's help for you...

Answer 6

@user2830448 Please check following code as per your requirement. You can change height in first input as much you require:

.k-input{
    height: 2.214em;
    line-height: 2.214em;
    padding: .177em 0;
    text-indent: .8em;
    border: 0;
    margin: 0;
}

.custom_parent .k-input{
    height:auto !Important;
}

<div class="custom_parent">
    <input  type="text" class="k-textbox k-input" >
</div>  

<input class="k-textbox k-input" >