| Server IP : 122.155.17.190 / Your IP : 18.216.156.171 Web Server : Apache/2 System : Linux cat17190.thaihostserver.com 5.10.0-21-amd64 #1 SMP Debian 5.10.162-1 (2023-01-21) x86_64 User : bungkla ( 1054) PHP Version : 5.6.40 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/bungkla/public_html/css/ |
Upload File : |
/*
CSS for the main interaction
*/
.tabset > input[type="radio"] {
position: absolute;
left: -200vw;
}
.tabset .tab-panel {
display: none;
}
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
display: block;
}
/*
Styling
*/
body {
font: 16px/1.5em "thai_sans_lite";
color: #333;
font-weight: 300;
}
.tabset > label {
position: relative;
display: inline-block;
border: 1px solid transparent;
border-bottom: 0;
cursor: pointer;
font-size:22px;
font-weight: 400;
padding-top: 15px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
}
.tabset > label::after {
content: "";
position: absolute;
left: 60px;
bottom: 10px;
width: 42px;
height: 4px;
background: #8d8d8d;
}
.tabset > label:hover,
.tabset > input:focus + label {
color:#207000;
}
.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
background: #F9D217;
}
.tabset > input:checked + label {
border-color: #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.tab-panel {
padding: 0px 0;
border-top: 1px solid #ccc;
}
/*
Demo purposes only
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 0px;
}
.tabset {
max-width: 65em;
}