How to remove rounded corners from one jQuery widget but not others?

My particular problem is that I want the autocomplete function to not have round corners, but all other widgets that have round corners should. Is there a parameter that I can pass to disable corners for autofill only?

Edit

Let's see if this can be answered.

On the Datepicker page .

I would like to remove all the Round-corner classes from appearing (the title and buttons of the next-previous).

$( "#datepicker" ).datepicker('widget').removeClass('ui-corner-all'); will not work.

+3
source share
5 answers

Very late, but here it is:

jQuery UI widgets have a method that returns an HTML node for the widget itself. So the answer will be as follows:

$('#someinput').autocomplete(...).autocomplete('widget').removeClass('ui-corner-all');

Reply to EDIT:

, widget() autocomplete() ( datepicker()) . , HTML, $().

+12

css .

.ui-corner-flat {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

$("#elementwithcorners").addClass("ui-corner-flat");
+6

    $( "#signup" ).dialog(
        {
            create: function (event, ui) {

                $(".ui-dialog").css('border-bottom-left-radius','0px');
            },

        }
    );
+3

_suggest() Autocomplete menu.refresh() ui-corner-all .. , . open() menu.refresh() _suggest(), :

$("#autocomplete").autocomplete("option", {
  open: function(event, ui) {
    $(this).autocomplete("widget")
           .menu("widget").removeClass("ui-corner-all")
           .find(".ui-corner-all").removeClass("ui-corner-all");
  }
});

Datepicker , -. , , :

// store the built-in update method on the "global" instance...
$.datepicker.__updateDatepicker = $.datepicker._updateDatepicker;
// ...and then clobber with our fix
$.datepicker._updateDatepicker = function(inst) {
  $.datepicker.__updateDatepicker(inst);
  inst.dpDiv.removeClass("ui-corner-all")
      .find(".ui-corner-all").removeClass("ui-corner-all");
};

, _updateDatepicker() . , _updateDatepicker() , , . , - CSS, :

.ui-autocomplete.ui-menu.ui-corner-all,
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-corner-all,
.ui-datepicker.ui-corner-all,
.ui-datepicker-header.ui-corner-all,
.ui-datepicker-next.ui-corner-all,
.ui-datepicker-prev.ui-corner-all {
  border-radius: 0;
}

( !important) . jQuery – fudging , , & hellip;

+3

CSS , , .

p.rounded { border-radius: 10px; }

p.none-rounded { border-radius: 0; }

+1

Source: https://habr.com/ru/post/1782733/


All Articles