Firefox Cross Browser

.choice-form { box-sizing: border-box; width: 860px; margin-bottom: 40px; color: #fff; font-size: 0px; font-weight: normal; } .choice-form input, .choice-form select, .choice-form label { display: block; } .choice-wrapper { position: relative; display: inline-block; border-radius: 40px; font-size: 14px; line-height: 16px; margin-right: 16px; margin-bottom: 18px; vertical-align: top; } .choice-form p { margin: 0; margin-bottom: 6px; margin-left: 16px; } .choice-form select { display: block; padding: 10px 32px 10px 14px; color: #fff; font-size: 16px; line-height: 18px; border-radius: 20px; border: 0px; background-color: rgba(255,255,255,0.3); -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; cursor: pointer; } .choice-wrapper:first-child:after{ position: absolute; top: 40px; right: 15px; border-top: 4px solid #fff; border-right: 4px solid transparent; border-left: 4px solid transparent; cursor: pointer; content: ""; } .price-controls label { display: inline-block; color: #fff; font-size: 16px; line-height: 18px; vertical-align: top; cursor: pointer; } .price-controls input { display: inline-block; width: 40px; color: inherit; vertical-align: top; text-align: center; border: none; background: none; outline: none; cursor: pointer; margin-bottom: 2px; } .price-controls { padding-left: 15px; margin-right: 15px; color: #fff; font-size: 0px; } .price-controls span { font-size: 14px; } .range-controls { position: relative; max-width: 218px; padding: 17px 15px; border-radius: 20px; background: rgba(255, 255, 255, 0.3); } .filter-price__scale { box-sizing: border-box; width: 100%; height: 4px; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; } .filter-price__range { position: relative; margin-left: 20%; width: 51%; height: inherit; background-color: #f8f7f4; } .filter-price__toggle { position: absolute; top: 50%; width: 20px; height: 20px; background-color: #f8f7f4; border-radius: 50%; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); } .filter-price__toggle:hover { width: 22px; height: 22px; } .filter-price__toggle-min { left: 0; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .filter-price__toggle-max { left: 80px; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .radio-wrapper { padding: 12px 17px 10px 16px; font-size: 0px; background-color: rgba(255,255,255,0.3); border-radius: 20px; } .choice-form input[type="radio"] { display: none; } .radiobtn label { position: relative; display: inline-block; margin-right: 20px; padding-left: 30px; font-size: 16px; line-height: 18px; vertical-align: top; cursor: pointer; } .radiobtn label:before { position: absolute; display: block; left: -1px; height: 12px; width: 12px; border: 3px solid #aabbb1; border-radius: 50%; box-shadow: 0 0 0 1px #fff; content: ""; } .radiobtn label:last-child { margin: 0; } .choice-wrapper:nth-child(3) { margin: 0; } .filters { padding: 10px 16px 10px 15px; font-size: 0px; border-radius: 20px; background-color: rgba(255,255,255,0.3); } .filters input { display: none; } .filters label { position: relative; display: inline-block; margin-right: 20px; padding-left: 32px; font-size: 16px; line-height: 18px; vertical-align: top; cursor: pointer; } .filters label:before { position: absolute; display: block; top: -1px; left: 3px; width: 20px; height: 20px; border: 1px solid #fff; border-radius: 3px; content: ""; } .filters label:after { position: absolute; top: 5px; left: 9px; z-index: 1; width: 9px; height: 5px; display: none; content: ""; border: 2px solid #fff; border-top-style: none; border-right-style: none; transform: rotate(-45deg); } .filters input[type="checkbox"]:checked + label:after { display: block; } .filters label:last-child { margin: 0; } .form-btn { display: inline-block; margin-bottom: 40px; margin-top: 20px; vertical-align: top; float: right; } .choice-form input[type="submit"] { padding: 10px 26px; color: #fff; font-size: 16px; line-height: 18px; border: 0px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.19); border: 2px solid white; cursor: pointer; outline: none; } 

 <form class="choice-form" action="url" method="get"> <div class="choice-wrapper"> <p>Сортировка:</p> <select name="sort"> <option value="popular">по популярности</option> <option value="cheap">сначала недорогие</option> <option value="expensive">сначала дорогие</option> <option value="fat">по жирности</option> </select> </div> <div class="choice-wrapper filter-range"> <div class="price-controls"> <span>Цена:</span> <label class="min-price"> <input type="text" name="min-price" value="100"></label> <span class="txt-rub">руб&nbsp; </span> <span> – </span> <label class="max-price"><input type="text" name="max-price" value="500"></label> <span class="txt-rub">руб</span> </div> <div class="range-controls"> <div class="filter-price__scale"> <div class="filter-price__range" style="margin-left: 20%; width: 41%"> <div class="filter-price__toggle filter-price__toggle-min"></div> <div class="filter-price__toggle filter-price__toggle-max"></div> </div> </div> </div> </div> <div class="choice-wrapper radiobtn"> <p>Жирность:</p> <div class="radio-wrapper"> <input type="radio" name="fat" value="zero" id="zero"> <label for="zero">0%</label> <input type="radio" name="fat" value="ten" id="ten" checked> <label for="ten">до 10%</label> <input type="radio" name="fat" value="thirty" id="thirty"> <label for="thirty">до 30%</label> <input type="radio" name="fat" value="more-thirty" id="more-thirty"> <label for="more-thirty">выше 30%</label> </div> </div> <div class="choice-wrapper"> <p>Наполнители:</p> <div class="filters"> <input type="checkbox" name="chocolate" id="chocolate" checked> <label for="chocolate">шоколадные</label> <input type="checkbox" name="sugar" id="sugar" checked> <label for="sugar">сахарные присыпки</label> <input type="checkbox" name="fruits" id=fruits> <label for="fruits">фрукты</label> <input type="checkbox" name="syrup" id="syrup"> <label for="syrup">сиропы</label> <input type="checkbox" name="jam" id="jam"> <label for="jam">джемы</label> </div> </div> <input class="form-btn" type="submit" value="Применить"> </form>