Remove Selector CSS with Jquery

Question

I have CSS element selector, I want to remove it's CSS with the help of jQuery. How can I remove it CSS not the element input[type="button"]

Issue is CSS file where it is written I cannot change as it is coming from asp.net dll

input[type="button"] {
    min-width: 6em;
    padding: 7px 10px;
    border: 1px solid #ababab;
    background-color: #fdfdfd;
    background-color: #fdfdfd;
    margin-left: 10px;
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 11px;
    color: #444;
}

Change the CSS to a class, then use removeClass() or classList.remove() in your JS — Rory McCrossan
– Rory McCrossan, Commented Nov 1, 2017 at 10:18
You have to use css specificity at this context. Create a new class with default styling properties and add it to the relevant elements during the runtime. You cannot remove a selector from a rendered CSS. — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Nov 1, 2017 at 10:18
One suggestion can be to replace all the input[type = "button"] with div and style that div like a button — Abhi
– Abhi, Commented Nov 1, 2017 at 10:20

RaJesh RiJo · Accepted Answer · 2017-11-01 10:40:09Z

1

Am afraid of using this all: initial which used to set all css properties to initial.

$(document).ready(function() {
  $("input[type='button']").css('all', 'initial');
});

input[type="button"] {
  background: red;
  color: white;
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myContainer">
  <input type="button" class="btn" value="Submit">
  <input type="button" class="btn" value="Reset">
</div>

Other wise you are suppose to change all css properties using jquery css()

$(document).ready(function() {
  $("input[type='button']").css({
    'background': 'initial',
    'color': 'initial'
  });
});

input[type="button"] {
  background: red;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myContainer">
  <input type="button" class="btn" value="Submit">
  <input type="button" class="btn" value="Reset">
</div>

edited Nov 1, 2017 at 10:40

answered Nov 1, 2017 at 10:21

RaJesh RiJo

4,4005 gold badges27 silver badges46 bronze badges

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

3 Comments

Milind Over a year ago

This removes all button. I need to remove css

RaJesh RiJo Over a year ago

check the updated answer. am not sure about this will help or not!

Milind Over a year ago

No it did not works. It remove all other css class to :(

Super User · Accepted Answer · 2017-11-01 10:28:30Z

0

Just add a class to that styling and use removeClass() method... Check snippet below..

$('input[type="button"]').removeClass('btn');

.btn {
    min-width: 6em;
    padding: 7px 10px;
    border: 1px solid #ababab;
    background-color: #fdfdfd;
    background-color: #fdfdfd;
    margin-left: 10px;
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 11px;
    color: #444;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" value="Button"/>

edited Nov 1, 2017 at 10:28

answered Nov 1, 2017 at 10:20

Super User

9,6623 gold badges34 silver badges48 bronze badges

3 Comments

Abhi Over a year ago

What I understand from the question, OP wants to remove the CSS associated with input[type="button"], not the element itself

Super User Over a year ago

@Abhi just read question description, what OP wants I have CSS element selector which I want to remove with the help of jQuery. How can I remove it input[type="button"]

Milind Over a year ago

This removes all button. I need to remove css

Abhi · Accepted Answer · 2017-11-01 10:30:55Z

0

There can be two ways to achieve this:

With pure CSS, just override the CSS associated with
input[type="button"] with the help of a class and !important
Replace all the input[type="button"] elements with a div and have the dive styled like a button and work like a button

For example:

jQuery

var input_buttons = jQuery("input[type='button']");

jQuery.each(input_buttons, function(i, ele) {
  jQuery(ele).replaceWith("<div class='button' onclick='...'>Submit</div>")
});

CSS

.button {
  /* CSS to stylize the div to look like a button */
}

edited Nov 1, 2017 at 10:30

answered Nov 1, 2017 at 10:28

Abhi

4,2916 gold badges49 silver badges79 bronze badges

2 Comments

Milind Over a year ago

Issue is CSS file where it is written I cannot change as it is coming from asp.net dll

Abhi Over a year ago

Then can you try the second way I suggested

Ehsan · Accepted Answer · 2017-11-01 10:50:09Z

best way is use of class like this:

<input type="button" class="myButton">

And insert css codes to .myButton class like this:

.myButton {
    min-width: 6em;
    padding: 7px 10px;
    border: 1px solid #ababab;
    background-color: #fdfdfd;
    background-color: #fdfdfd;
    margin-left: 10px;
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 11px;
    color: #444;
}

so you can remove css code with this jquery code :

$('input[type=button]').removeClass('myButton');

 $(document).ready(function(){
    $('.myButton').click(function(){
        $(this).removeClass('myButton');
    })
 })

.myButton {
    min-width: 6em;
    padding: 7px 10px;
    border: 1px solid #ababab;
    background-color: #fdfdfd;
    margin-left: 10px;
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 11px;
    color: #444;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<input type="button" class="myButton" value="Click Me!">

Collectives™ on Stack Overflow

Remove Selector CSS with Jquery

4 Answers 4

3 Comments

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related