Jak dodać border-corner-promień tylko po lewej stronie przycisku z jquery-ui-1.9.2.custom? - javascript, jquery, html, css, css3

Mam ten kod w moim HTML:

<div id="ot-lang-src">
<button id="rerun"></button>
<button id="select">Choose a language</button>
<ul id="ui-menu-left">
</ul>
</div>

Używam jquery-ui-1.9.2.custom, który pobrałem. Problem dotyczy promienia granicy. Próbuję dodać promień obramowania tylko po lewej stronie przycisku. Obramowanie po prawej stronie pozostaje równe 0px.

Dodano Jquery-ui-1.9.2.custom.js .ui-corner-all klasa do przycisku na ładowaniu strony, co oznacza, że ​​obramowanie dla wszystkich czterech rogów wynosi 2px. Próbowałem usunąć .ui-corner-all klasa i dodać .ui-corner-left klasa:

$("button#rerun").removeClass("ui-corner-all").addClass("ui-corner-left");

i to nie działa. Mam ten kod w jquery-ui-1.9.2.custom.css:

.ui-corner-all, .ui-corner-top, .ui-corner-left,.ui-corner-tl {-moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {-moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {-moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {-moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }

Czy to właściwy sposób na rozwiązanie tego problemu i jak go usunąć .ui-corner-all klasa? Czy to lepszy sposób na rozwiązanie tego problemu?

Dzięki!

Odpowiedzi:

0 dla odpowiedzi № 1

Zwiększ promień narożnika, na przykład do 8px, a prawdopodobnie zauważysz, że to działa. Test skrzypiec tutaj

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
-moz-border-radius-top-left: 8px;
-webkit-border-top-left-radius: 8px;
-khtml-border-top-left-radius: 8px;
border-top-left-radius: 8px;
}

---

0 dla odpowiedzi nr 2

Sugerowałbym dodanie własnej przycisku do przycisku i upewnienie się, że CSS definiujący tę klasę jest ładowany po definicjach CSS interfejsu użytkownika JQuery.

---

0 dla odpowiedzi № 3

Musisz ustawić border-radius właściwość taka sama jak ta reguła:

border-radius: top-left top-right bottom-right bottom-left;

Na przykład:

border-radius: 0px 10px 20px 30px;
-ms-border-radius: 0px 10px 20px 30px;  /* For make it compatible with IE 8 */

Jeśli do swojej strony dodano odniesienie do jQuery, możesz zrobić dokładnie to samo, co tutaj Możliwość zmiany promienia granicy

---