- Posts: 18
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
.array-flexible-row.with-smileys table.subquestion-list, .array-flexible-row.with-smileys col.col-visible { width: auto !important; } .array-flexible-row.with-smileys table.array-no-dropdown td.answer-item.text-center { padding: 0; border: 1px solid #DBDBDB } .array-flexible-row.with-smileys .radio label { display: block; width: 78px; height: 78px; padding: 0; background: transparent 0 0 no-repeat; } .array-flexible-row.with-smileys .radio input[type="radio"]:checked + label { background: #ECF0F1; } .array-flexible-row.with-smileys .radio label::before { border: 0 none; border-radius: 0; content: ""; display: inline-block; height: 62px; width: 62px; left: 50%; top: 8px; margin-left: -31px; position: absolute; background: transparent 0 0 no-repeat; opacity: 0.5; filter: alpha(opacity=50); } .array-flexible-row.with-smileys .radio.answer_cell_A1 label::before { background-image: url(../images/smiley_1_62x62.png); } .array-flexible-row.with-smileys .radio.answer_cell_A2 label::before { background-image: url(../images/smiley_2_62x62.png); } .array-flexible-row.with-smileys .radio.answer_cell_A3 label::before { background-image: url(../images/smiley_3_62x62.png); } .array-flexible-row.with-smileys .radio.answer_cell_A4 label::before { background-image: url(../images/smiley_4_62x62.png); } .array-flexible-row.with-smileys .radio.answer_cell_A5 label::before { background-image: url(../images/smiley_5_62x62.png); } .array-flexible-row.with-smileys .radio input[type="radio"]:hover + label::before { opacity: 0.65; filter: alpha(opacity=65); } .array-flexible-row.with-smileys .radio input[type="radio"]:checked + label::before { opacity: 1; filter: alpha(opacity=100); } .array-flexible-row.with-smileys .radio input[type="radio"]:focus + label::before { outline: none; } .array-flexible-row.with-smileys .radio label::after { display: none; }
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('#question{QID}').addClass('with-smileys'); }); </script>
.array-flexible-row.with-smileys table.subquestions-list, .array-flexible-row.with-smileys col.havewidth { width: auto !important; } .array-flexible-row.with-smileys table.subquestions-list { border-collapse: collapse; border-spacing: 0px; } .array-flexible-row.with-smileys table.subquestions-list tbody tr { background-color: transparent !important; } .array-flexible-row.with-smileys thead td, .array-flexible-row.with-smileys th.answertext { display: none; } .array-flexible-row.with-smileys table.subquestions-list td.answer-item { padding: 0; border: 1px solid #DBDBDB; } .array-flexible-row.with-smileys input.radio { position: absolute; left: -9999em; } .array-flexible-row.with-smileys td.answer-item label { display: block; position: relative; top: auto; left: auto; width: 78px; height: 78px; padding: 0; background: transparent 0 0 no-repeat; font-size: 0; } .array-flexible-row.with-smileys td.answer-item input[type="radio"]:checked + label { background: #ECF0F1; } .array-flexible-row.with-smileys td.answer-item label::before { border: 0 none; border-radius: 0; content: ""; display: inline-block; height: 62px; width: 62px; left: 50%; top: 8px; margin-left: -31px; position: absolute; background: transparent 0 0 no-repeat; opacity: 0.5; filter: alpha(opacity=50); } .array-flexible-row.with-smileys td.answer-item.answer_cell_00A1 label::before { background-image: url(smiley_1_62x62.png); } .array-flexible-row.with-smileys td.answer-item.answer_cell_00A2 label::before { background-image: url(smiley_2_62x62.png); } .array-flexible-row.with-smileys td.answer-item.answer_cell_00A3 label::before { background-image: url(smiley_3_62x62.png); } .array-flexible-row.with-smileys td.answer-item.answer_cell_00A4 label::before { background-image: url(smiley_4_62x62.png); } .array-flexible-row.with-smileys td.answer-item.answer_cell_00A5 label::before { background-image: url(smiley_5_62x62.png); } .array-flexible-row.with-smileys td.answer-item input[type="radio"]:hover + label::before { opacity: 0.65; filter: alpha(opacity=65); } .array-flexible-row.with-smileys td.answer-item input[type="radio"]:checked + label::before { opacity: 1; filter: alpha(opacity=100); } .array-flexible-row.with-smileys td.answer-item input[type="radio"]:focus + label::before { outline: none; } .array-flexible-row.with-smileys td.answer-item label::after { display: none; }
/** SMILEYS QUESTION **/ .array-flexible-row.with-smileys table.subquestion-list { width: 100% !important; max-width: 395px; border: 0 none; } .array-flexible-row.with-smileys table.subquestion-list thead th, .array-flexible-row.with-smileys col { width: auto !important; border: 0 none; } .array-flexible-row.with-smileys table.subquestion-list thead td, .array-flexible-row.with-smileys table.subquestion-list th.answertext { width: 0; padding: 0; border: 0 none; } .array-flexible-row.with-smileys table.subquestion-list tbody tr:hover { background: transparent none; } .array-flexible-row.with-smileys table.subquestion-list td.answer-item { width: 20%; padding: 0; border: 1px solid #DBDBDB } .array-flexible-row.with-smileys .radio-item label { display: block; width: 100%; height: 0; margin: 0; padding: 100% 0 0 0; background: transparent 0 0 no-repeat; font-size: 0; } .array-flexible-row.with-smileys .radio-item input[type="radio"]:checked + label { background: #ECF0F1; } .array-flexible-row.with-smileys .radio-item label::before { position: absolute; left: 50%; top: 8px; display: inline-block; width: 79.4872%; height: 0; margin-left: -39.7436%; padding-top: 79.4872%; content: ""; border: 0 none; border-radius: 0; background: transparent 0 0 no-repeat; background-size: cover; opacity: 0.5; filter: alpha(opacity=50); } .array-flexible-row.with-smileys .radio-item.answer_cell_A1 label::before { background-image: url(../images/smiley_1_62x62.png); } .array-flexible-row.with-smileys .radio-item.answer_cell_A2 label::before { background-image: url(../images/smiley_2_62x62.png); } .array-flexible-row.with-smileys .radio-item.answer_cell_A3 label::before { background-image: url(../images/smiley_3_62x62.png); } .array-flexible-row.with-smileys .radio-item.answer_cell_A4 label::before { background-image: url(../images/smiley_4_62x62.png); } .array-flexible-row.with-smileys .radio-item.answer_cell_A5 label::before { background-image: url(../images/smiley_5_62x62.png); } .array-flexible-row.with-smileys .radio-item input[type="radio"]:hover + label::before { opacity: 0.65; filter: alpha(opacity=65); } .array-flexible-row.with-smileys .radio-item input[type="radio"]:checked + label::before { opacity: 1; filter: alpha(opacity=100); } .array-flexible-row.with-smileys .radio-item input[type="radio"]:focus + label::before { outline: none; } .array-flexible-row.with-smileys .radio-item label::after { display: none; } /* Defeat the core responsive styles */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { .array-flexible-row.with-smileys table.ls-answers { display: table; border: 0 none; } .array-flexible-row.with-smileys table.ls-answers thead, .array-flexible-row.with-smileys table.ls-answers tbody { display: table-row-group; border: 0 none; } .array-flexible-row.with-smileys table.ls-answers tr { display: table-row; border: 0 none; } .array-flexible-row.with-smileys table.ls-answers th { display: table-cell; border: 0 none; } .array-flexible-row.with-smileys table.ls-answers td { display: table-cell; } .dir-ltr .array-flexible-row.with-smileys table.ls-answers, .dir-ltr .array-flexible-row.with-smileys table.ls-answers thead, .dir-ltr .array-flexible-row.with-smileys table.ls-answers tbody, .dir-ltr .array-flexible-row.with-smileys table.ls-answers th, .dir-ltr .array-flexible-row.with-smileys table.ls-answers td, .dir-rtl .array-flexible-row.with-smileys table.ls-answers, .dir-rtl .array-flexible-row.with-smileys table.ls-answers thead, .dir-rtl .array-flexible-row.with-smileys table.ls-answers tbody, .dir-rtl .array-flexible-row.with-smileys table.ls-answers th, .dir-rtl .array-flexible-row.with-smileys table.ls-answers td, .array-flexible-row.with-smileys table.ls-answers tr { text-align:center; } .dir-ltr table.ls-answers .radio-item label.ls-label-xs-visibility::before, .dir-ltr table.ls-answers .checkbox-item label.ls-label-xs-visibility::before, .dir-rtl table.ls-answers .radio-item label.ls-label-xs-visibility::before, .dir-rtl table.ls-answers .checkbox-item label.ls-label-xs-visibility::before { margin-right: 0; margin-left: -39.7436%; } }