Remove all css from a html element using JQuery or CSS?

Question

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

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
– 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
– 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
– guradio, Commented May 16, 2017 at 10:16

Arun Kumar · Accepted Answer · 2017-05-16 10:21:11Z

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.com/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"  />

edited May 16, 2017 at 10:21

answered May 16, 2017 at 10:10

Arun Kumar

1287 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

guradio Over a year ago

border is gone.

Arun Kumar Over a year ago

Welcome. you can use this if you want to do it in jquery. $("input").focus(function(){ $(this).css("all","unset"); });

Marco Panichi Over a year ago

October 2018: IE doesn't support the property "all"

Peter VARGA Over a year ago

Not the best solution. When you then set any CSS attribute - at least in Chrome - all other attributes are set explicitly as unset. $("input").removeAttr('style'); is the better solution.

sumit chakraborty · Accepted Answer · 2017-05-16 10:05:39Z

0

You can use this:

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

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

answered May 16, 2017 at 10:05

sumit chakraborty

1419 bronze badges

Comments

Manish Joy · Accepted Answer · 2017-05-16 10:03:51Z

-1

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.

edited May 16, 2017 at 10:03

answered May 16, 2017 at 9:57

Manish Joy

4863 silver badges17 bronze badges

3 Comments

shams Over a year ago

but css is not apply through class it is applied 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; }

Manish Joy Over a year ago

then you need to remove the styles one by one but the best way is to add a class like active and add the css you want to it like .active { border-style: none, ... } etc.

Manish Joy Over a year ago

if you find the answer useful, then please upvote it.

user3766508 · Accepted Answer · 2017-05-16 10:25:01Z

-1

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

edited May 16, 2017 at 10:25

answered May 16, 2017 at 9:52

user3766508

616 bronze badges

2 Comments

shams Over a year ago

it is not applied through class but through element like this input{}

user3766508 Over a year ago

You can use any selector . I just given an example

Collectives™ on Stack Overflow

Remove all css from a html element using JQuery or CSS?

4 Answers 4

4 Comments

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related