I have a table and I want to make cell editable by showing the input element when user click the cell and I want to give the same height and width to input that cell have. The problem is I am using Angular Material and they have some style on input element (not through class) and it overrides the class or inline style which I am trying to apply on input element. So how can I remove those style from input element with jQuery?

Css is apply like this

input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}

I have a table and I want to make cell editable by showing the input element when user click the cell and I want to give the same height and width to input that cell have. The problem is I am using Angular Material and they have some style on input element (not through class) and it overrides the class or inline style which I am trying to apply on input element. So how can I remove those style from input element with jQuery?

Css is apply like this

input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}

• javascript
• jquery
• html

Share Improve this question Follow edited May 16, 2017 at 10:37 Arun Kumar 12877 bronze badges asked May 16, 2017 at 9:48 shamsshams 23911 gold badge33 silver badges1111 bronze badges 5

• 4 .removeAttr('style') – guradio Commented May 16, 2017 at 9:49
• show what you are doing.. – Sunny Commented May 16, 2017 at 10:00
• currently I have not idea because to remove class removeClass can be used and to remove inline css .removeAttr('style') can be used but for this I don't know – shams Commented May 16, 2017 at 10:03
• If you don't want those styles, why can't you just override those styles with your own by using a more specific selector? Also, why do you need to use jquery to remove the style instead of just doing it with css? Show your class that is overriden – Pete Commented May 16, 2017 at 10:05
• i suggest just override the previous with what ever style you want. by adding a class or id with style. ID will be the most ideal selector to use then put what ever style you want – guradio Commented May 16, 2017 at 10:16

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You can do it with jQuery like below

$("input").focus(function(){ $(this).css("all","unset"); });

input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: red;
border-image: initial;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"  />

You can do it with css like below

input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: red;
border-image: initial;
}

input:focus {
  all: initial;
  * {
    all: unset;
  }
}

<input type="text"  />

You can use this:

$(document).ready(function(){
  //$("#inp1").removeAttr('style');
  $("input").removeAttr('style');
  //$("input [type='text']").removeAttr('style');
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" style="height:40px;" id="inp1"/>

For inline css use removeAttr('style') but for the styles getting applied via css, you need to remove classes as well. use removeAttr('class') for this.

if the css is applied on tag, thenbest way is to add a class like active and add the css you want to it like .active { border-style: none, ... } etc.

$("class/tag/id").removeAttr('style/class/id');