使用 Jquery 删除选择器 CSS

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

Answer 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>

Answer 2

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

Answer 3

There can be two ways to achieve this:

1. With pure CSS, just override the CSS associated with
   input[type="button"] with the help of a class and !important
2. 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 */
}

Answer 4

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!">