kotey

добавь в опции:
navText:false

делаем svg. Разделяя две части кривой, потом заливаем обычным градиентом каждую из них.
По поводу кроссбраузерности: caniuse.com/#search=svg
Ну или дедовским способом, картинку на background

https://codepen.io/tedmcdo/pen/PqxKXg - вот кстати интересный пример

Я бы рекомендовал вам использовать SVG, лучше и гибче решения вы не найдёте.

Пример на SVG с пропорциональным изменением размера:
https://jsfiddle.net/t6pgwhsr/

Пример на SVG с изменением размера только по ширине (адаптив):
https://jsfiddle.net/t6pgwhsr/2/

Второй вариант по моему идеален, такого вы точно не достигните чистым CSS.

Добавьте на страницу

$(function(){
    if(	$("#unive").prop("checked") ) 
    {	$('.autoblock #unive').addClass('active'); } 
    else {$('.autoblock #unive').removeClass('active');	}

    if(	$("#econom").prop("checked") ) 
    {	$('.autoblock #econom').addClass('active'); } 
    else { $('.autoblock #econom').removeClass('active'); }

    if(	$("#mini").prop("checked") ) 
    {	$('.autoblock #mini').addClass('active'); } 
    else { $('.autoblock #mini').removeClass('active'); }
});

UPD:
А лучше чтоб код не повторять - запилить его в функцию и вызывать где нужно

function checkRadioButtons()
{
    if(	$("#unive").prop("checked") ) 
    {	$('.autoblock #unive').addClass('active'); } 
    else {$('.autoblock #unive').removeClass('active');	}

    if(	$("#econom").prop("checked") ) 
    {	$('.autoblock #econom').addClass('active'); } 
    else { $('.autoblock #econom').removeClass('active'); }

    if(	$("#mini").prop("checked") ) 
    {	$('.autoblock #mini').addClass('active'); } 
    else { $('.autoblock #mini').removeClass('active'); }
}

    $(function(){
checkRadioButtons();
 });

$(".checkbox").change( function(){
checkRadioButtons();
 });

overflow-y: scroll;

Очень просто - цвет текста на кнопке - transparent (прозрачный), а фон нет. При наведении фон становится прозрачным, а цвет текста чёрным.

https://jsfiddle.net/t37mfbx7/

Все так и делают. Особенно если для себя.

masonry.desandro.com

https://jsfiddle.net/cr2d3kz0/

Но перед записью эти данные нужно обработать

Зачем?

Безопасно записать в СУБД - это prepared statements. Никак калечить пользовательский ввод для этого не нужно.
Вывести в html - есть нативный htmlspecialchars.

А вот в upd верное направление мысли. Абсолютно неважно, откуда данные - единственно важно куда эти данные пойдут. И именно для этого может понадобится дополнительная обработка именно для этого выходного формата.
Отправка письма - plain text можно отправлять как есть. html - html и есть, всё тот же htmlspecialchars.
Куда-нибудь в csv - используйте нативные функции обработки csv. json - json_encode. И так далее. Для каждого формата свои требования к оформлению пользовательского ввода.

Вот этот - наиболее производительный и гибкий код, чем тот, что написан у Вас:

$datatext=<<<t
"Он сказал, - поехали"
"Он сказал поехали!"
"Он сказал - поехали?"
"Он сказал поехали?!"
"Он сказал поехали..."
"Он сказал "поехали"
<b>"Он сказал, — поехали"</b>
"Ж"
"Ж" "полная"
"7" "444 "888"
""
t;

$datatext=preg_replace_callback(
        '#(([\"]{2,})|(?![^\W])(\"))|([^\s][\"]+(?![\w]))#u',
        function ($matches) {
            if (count($matches)===3) return "«»";
            else if ($matches[1]) return str_replace('"',"«",$matches[1]);
            else return str_replace('"',"»",$matches[4]);
        },
        $datatext
    );

echo "<pre>".$datatext."</pre>";

/*
«Он сказал, - поехали»
«Он сказал поехали!»
«Он сказал - поехали?»
«Он сказал поехали?!»
«Он сказал поехали...»
«Он сказал «поехали»
«Он сказал, — поехали»
«Ж»
«Ж» «полная»
«7» «444 «888»
«»
*/

filterable grid of items using Shuffle.js
multiple-filter-masonry

Пример

я сделал группировку через jQuery
$.each
вот пример codepen.io/dimsemenov/pen/pvvpgJ
или так

jQuery('#carousel-links').each(function() { // the containers for all your galleries
  jQuery(this).magnificPopup({
    delegate: 'a', // the selector for gallery item
    type: 'image',
    gallery: {
      enabled:true
    }
  });
});