<section id="camp-activities-inquiry">
<h1>Camp Activities Inquiry</h1>
<form action="/submit-form" method="POST">
<label for="activity-select">Which camp activities are you most looking forward to?</label>
<select id="activity-select" name="activity">
<option value="">--Please choose an option--</option>
<option value="hiking">Hiking</option>
<option value="canoeing">Canoeing</option>
<option value="fishing">Fishing</option>
<option value="crafts">Crafts</option>
<option value="archery">Archery</option>
</select>
<label for="food-allergies">Food Allergies (if any)</label>
<textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea>
<label for="additional-info">Additional things the counselor should know</label>
<textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea>
<button type="submit">Submit</button>
</form>
</section>
@import url("https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap");
body {
background: url("https://i.imgur.com/USuNW2N.jpeg") no-repeat 50% 18% / auto
115rem;
}
#camp-activities-inquiry {
font-family: "Bubblegum Sans", sans-serif;
padding: 20px;
border-radius: 8px;
max-width: 400px;
margin: 4rem auto;
position: relative;
}
#camp-activities-inquiry h1 {
color: #a67c52;
text-align: center;
margin-bottom: 20px;
font-size: 2.5rem;
font-weight: 700;
}
#camp-activities-inquiry form {
display: flex;
flex-direction: column;
gap: 5px;
}
#camp-activities-inquiry label {
font-size: 18px;
color: #5e4223;
margin-top: 2rem;
}
#camp-activities-inquiry textarea {
font-family: "Bubblegum Sans", sans-serif;
padding: 10px;
background: #fffbe7;
border: 2px solid #a67c52;
font-size: 16px;
color: #5e4223;
}
#camp-activities-inquiry button {
background-color: #92a86b;
font-family: "Bubblegum Sans", sans-serif;
font-size: 24px;
color: #fff;
padding: 15px 10px;
border: none;
margin-top: 2rem;
cursor: pointer;
transition: background-color 0.3s;
letter-spacing: 1.5px;
}
#camp-activities-inquiry button:hover {
background-color: #446948;
}
#camp-activities-inquiry button:disabled {
background-color: transparent;
border: 2px dashed #a67c52;
color: #a67c52;
cursor: default;
}
#activity-select {
height: 100%;
}
.s-hidden {
visibility: hidden;
}
.cusSelBlock {
height: 50px;
width: 100%;
display: block;
position: relative;
-webkit-perspective: 800px;
perspective: 800px;
}
.selectLabel {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 9999;
background-color: #fffbe7;
border: 2px solid #a67c52;
border-bottom: 2px dashed #a67c52;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #5e4223;
cursor: pointer;
display: block;
height: 100%;
letter-spacing: 1.5px;
line-height: 50px;
padding: 0 50px 0 20px;
text-align: left;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&:after {
content: "\25BC";
color: #5e4223;
font-size: 12px;
padding: 0px;
text-align: center;
position: absolute;
right: 0px;
top: 2px;
bottom: 0;
width: 50px;
}
&:hover {
-webkit-transform: rotateX(10deg);
transform: rotateX(10deg);
}
&:active {
-webkit-transform: rotateX(30deg);
transform: rotateX(30deg);
&:after {
content: "\25B2";
}
}
&.active {
&:after {
content: "\25B2";
}
}
}
::-webkit-scrollbar {
display: none;
}
.options {
position: absolute;
top: -15px;
right: 0;
left: 0;
height: 100%;
color: #5e4223;
li {
background-color: #fffbe7;
border-left: 2px solid #a67c52;
border-right: 2px solid #a67c52;
border-bottom: 2px dashed #a67c52;
cursor: pointer;
display: block;
line-height: 50px;
list-style: none;
opacity: 1;
padding: 0 50px 0 20px;
text-align: left;
transition: transform 300ms ease;
position: absolute;
top: 0px;
left: 0;
right: 0;
z-index: 0;
height: 50px;
&:hover,
&.active {
background-color: #5e4223;
color: #fff;
}
&:last-child {
border-bottom: 2px solid #a67c52;
}
&:nth-child(1) {
display: none;
}
&:nth-child(2) {
transform: translateY(4px);
z-index: 5;
}
&:nth-child(3) {
transform: translateY(7px);
z-index: 4;
}
&:nth-child(4) {
z-index: 3;
}
&:nth-child(5) {
z-index: 2;
}
&:nth-child(6) {
z-index: 1;
}
}
}
$(function () {
var defaultSelectBox = $("#activity-select");
var numOfOptions = defaultSelectBox.children("option").length;
var customList = $("<ul/>", { class: "options" });
$("#camp-activities-inquiry button").prop("disabled", true);
$(
"#camp-activities-inquiry input, #camp-activities-inquiry textarea, #camp-activities-inquiry select"
).on("change", function () {
var isFilled = true;
$(
"#camp-activities-inquiry input, #camp-activities-inquiry textarea, #camp-activities-inquiry select"
).each(function () {
if ($(this).val() === "") {
isFilled = false;
return false;
}
});
$("#camp-activities-inquiry button").prop("disabled", !isFilled);
});
defaultSelectBox
.addClass("s-hidden")
.wrap('<div class="cusSelBlock"></div>')
.after('<div class="selectLabel"></div>')
.next(".selectLabel")
.text(defaultSelectBox.children("option").eq(0).text())
.after(customList);
for (var i = 0; i < numOfOptions; i++) {
$("<li/>", {
text: defaultSelectBox.children("option").eq(i).text(),
rel: defaultSelectBox.children("option").eq(i).val()
}).appendTo(customList);
}
$(".selectLabel").click(function () {
$(this).toggleClass("active");
if ($(this).hasClass("active")) {
openList();
focusItems();
} else {
closeList();
}
});
$(".options li").on("keypress click", function (e) {
e.preventDefault();
$(".options li").removeClass("active");
$(this).addClass("active");
closeList();
$(".selectLabel").removeClass("active").text($(this).text());
defaultSelectBox.val($(this).text());
$(".selected-item p span").text($(this).text());
});
});
function openList() {
$(".options")
.children("li")
.each(function (i) {
$(this)
.attr("tabindex", i)
.css({
transform: "translateY(" + i * 100 + "%)",
"transition-delay": i * 30 + "ms"
});
});
}
function closeList() {
$(".options").children("li").css({
transform: "translateY(0)",
"transition-delay": "0ms"
});
$(".options").children("li").eq(1).css("transform", "translateY(4px)");
$(".options").children("li").eq(2).css("transform", "translateY(7px)");
}
function focusItems() {
$(".options")
.on("focus", "li", function () {
$(this).addClass("active").siblings().removeClass();
})
.on("keydown", "li", function (e) {
if (e.keyCode == 40) {
$(this).next().focus();
return false;
} else if (e.keyCode == 38) {
$(this).prev().focus();
return false;
}
})
.find("li")
.first()
.focus();
}
This Pen doesn't use any external CSS resources.