html – Is it possible to remove name=”” from input type=”radio” CSS Tabs?


is it possible to remove name=”” from <input type=”radio” for CSS tabs? I need to fully remove it as the tabs are inside a form action submit layout and it’s adding extra to the URL params. https://example.com/search/?tab=on&q=test
should be only https://example.com/search/?q=test

The problem goes away when I remove name=”” but that breaks the CSS tabs. So not sure exactly what to do here to solve the problem. I need another mind to figure it out lol.

I stripped my CSS tab code apart. There is the jsfiddle link: https://jsfiddle.net/DestructiveBurn/5jvf06nd/3/

Here’s a preview of the tabs code.

CSS

/*Master Tab Column*/
.tab-column {
    display: block;
    margin: 0 auto;
    max-width: 750px;
}
/*Master Tab Column Tabs*/
.tab-column .tabber {
    display: block;
    float: left;
    margin-left: 0px;
    margin-right: 5px;
    padding: 5px 10px 5px 10px;
    background-color: #0B0F24;
    font-family: 'Nunito-Sans';
    font-size: 16px;
    color:#fff;
    border-radius: 10px 10px 0 0;   
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/*Master Tab Column Tabs Hover*/
.tab-column .tabber:hover {
    background-color: #202848;
    color: #fff;
}
/*Master Tab Column Hide Radio Buttons*/
.tab-column .tab-class {
    display: none;
}
/*Master Tab Column Tab Checked*/
.tab-column .tab-class:checked + .tabber {
    background-color: #202848;
    color: #fff;
}
/*Master Tab Column Tab Quantity*/
.tab-column .tab-class[id=tab-1]:checked ~ .tab-content .tab-1,
.tab-column .tab-class[id=tab-2]:checked ~ .tab-content .tab-2,
.tab-column .tab-class[id=tab-3]:checked ~ .tab-content .tab-3,
.tab-column .tab-class[id=tab-4]:checked ~ .tab-content .tab-4,
.tab-column .tab-class[id=tab-5]:checked ~ .tab-content .tab-5 {
    display: block;
}
/*Master Tab Column Body*/
.tab-column .tab_content {
    display: none;
    clear: both;
    width: 100%;
}
/*Master Tab Column Body Background Per Tabs Selected*/
.tab-2, .tab-3, .tab-4, .tab-5 {
    padding: 2px;
    background-color: rgba(223,223,223,0.89);
    border-top: solid 5px #202848;
    border-left: solid 1px #B4B5BB;
    border-right: solid 1px #B4B5BB;
    border-bottom: solid 1px #B4B5BB;
    border-radius: 10px 10px 10px 10px;
}
/*Master Tab Search First Tab Position*/
.tab-column .tabber_1 {
    margin-left: 35px;
}
/*Master Tab Search Shadow Effect*/
.tab-content:after {
    display: block;
    width: 100%;
    height: 14px;
    background-image: url(../img/shadow.webp);
    background-size: 100% 15px;
    -moz-background-size: 100% 15px;
    background-size: 100% 15px;
    -o-background-size: 100% 15px;
    -webkit-background-size: 100% 15px;
    content: '';
    margin-top: -1px;
}

HTML

<!--Master Tab Column Start-->
<div class="tab-column">
    <!--Tab 1 Button-->
    <input type="radio" name="tab" class="tab-class" id="tab-1" checked><label class="tabber tabber_1" for="tab-1">Bar</label>
    <!--Tab 2 Button-->
    <input type="radio" name="tab" class="tab-class" id="tab-2"><label class="tabber tabber_2" for="tab-2">Engines</label></label>
    <!--Tab 3 Button--> 
    <input type="radio" name="tab" class="tab-class" id="tab-3"><label class="tabber tabber_3" for="tab-3">Places</label></label>
    <!--Tab 4 Button--> 
    <input type="radio" name="tab" class="tab-class" id="tab-4"><label class="tabber tabber_4" for="tab-4">Info</label> 

    <!--Master Tab Content Start-->
    <div class="tab-content">
        <!--Tab 1 Search Engine Sites Start-->
        <div class="tab_content tab-1 searchbar-function-core">
Tab 1 Demo
        </div>
    <!--Tab 1 Search Engine Sites End-->

    <!--Tab 2 Search Engine Sites Start-->
        <div class="tab_content tab-2 msc-top-btn">
Tab 2 Demo
        </div>
    <!--Tab 2 Search Engine Sites End-->

    <!--Tab 3 Other Sites Start-->
        <div class="tab_content tab-3">
Tab 3 Demo
        </div>
    <!--Tab 3 Other Sites End-->

    <!--Tab 4 Info Data Start-->
        <div class="tab_content tab-4">
Tab 4 Demo
        </div>
    <!--Tab 4 Info Data End-->
    </div>
    <!--Master Tab Content End-->
</div>
<!--Master Tab Column End-->



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here