I have a slider and I want it when it slides one way it hides all the elements on the page with a classname="siteContainer". When I click it again I want it to display all the elements with the classname="siteContainer"
Because there are many elements I need a loop (which I have). I have managed to make all the elements visible but been unable to make the visible again.
The elements are not contiguous so cannot be grouped into one div with one ID.
It is in codepen https://codepen.io/payling/pen/MRmvwY
and below
<script>
function setDisplay(className, displayValue) {
var items = document.getElementsByClassName(className);
for (var i=0; i < items.length; i++) {
items[i].style.display = displayValue;
}
}
function showsiteContainer() {
setDisplay("siteContainer", "none");
}
</script>
function showsiteContainer() {
var x = document.getElementById("block");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<style>
.siteContainer {
display:flex;
width:40px;
hieght:40px;
color:black;
text-decoration:none;
font-size:13px;
padding:5px;
border-top-color: rgb(133, 130, 130);
border-top-style:dotted;
border-width: 1px;
}
/* SLIDE BUTTON*/
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #EDEDED;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1C77C3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(18px);
-ms-transform: translateX(18px);
transform: translateX(18px);
}
/* Rounded sliders */
.slider.round {
border-radius: 24px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<body>
<div>
<span>DETAILS</span>
<label class="switch">
<input type="checkbox" onclick="showsiteContainer()" >
<span class="slider round"></span>
</label>
</div>
<div>
<div class="siteContainer">an element</div>
<div class="siteContainer">2nd element</div>
</div>
<div class="siteContainer">3rd element</div>
<div class="siteContainer">4th element</div>
</div>
</body>
Have a look at your example with a slight modification, I rewrote your function with :
function showsiteContainer() {
var elements = document.getElementsByClassName("siteContainer");
Array.prototype.forEach.call(elements, function(el) {
if (el.style.display === "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
});
}
https://codepen.io/Xolkys/pen/rbmzXz
Related
I am trying to allow the user to select what will display via a toggle switch. For example, I have two functions: thirtyDays & year. Either onChange or onClick, I would like for the user to be able to switch which function is called. Is there a way to do this? Here is my code for the ToggleButton component:
thirtyDays = (props) => {
console.log("the past 30 days of transactions");
var now = new Date();
now.setDate(now.getDate() - 30);
}
year = (props) => {
console.log("year of transactions");
var now = new Date();
now.setDate(now.getDate() - 365);
}
render() {
return (
<label className="switch">
{
<>
{" "}
<input type="checkbox" id="togBtn" />
<div type="button" className="slider round">
<span className="on">Year</span>
<span className="off">30 Days</span>
</div>
</>
}
</label>
);
}
}
Here is my css:
.switch {
position: relative;
display: inline-block;
width: 175px;
height: 50px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: forestgreen;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 50px;
width:50px;
left: 10px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px rgb(2, 61, 2);
}
input:checked + .slider:before {
-webkit-transform: translateX(100px);
-ms-transform: translateX(100px);
transform: translateX(100px);
}
/*------ ADDED CSS ---------*/
.on
{
display: none;
}
.off, .on
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
font-size: 15px;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
/*--------- END --------*/
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
Here is my codesandbox: https://codesandbox.io/s/ancient-rgb-y62rm?file=/src/App.js
You can decide about function which you call checking state of your checkbox inside another function. Example:
const changePeriod = (e) => {
if ( console.log( e.target.checked ) ) {
year( /* your params */ )
} else {
thirtyDays( /* your params */ )
}
}
return (
<div className="App">
<input type="checkbox" onChange={ changePeriod }/>
</div>
);
You would have to maintain the toggle state in your component. Or, if you're willing to use a plugin, you could try react-switch.
Here's a working example - https://codesandbox.io/s/frosty-water-l4pr6
I made a pop-up window and used transition animation in CSS.
When I open the pop-up window, there is no problem with the transition animation, but when the pop-up window is closed, there will be residual border lines on the page.
This happens in Google Chrome.
Please click here for details：
https://codepen.io/lianflower/pen/zYKRPJb
<button data-modal-target="#modal">Open Modal</button>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">Example Modal</div>
<button data-close-button class="closebutton">×</button>
</div>
<div class="modal-body">
A wiki (/ˈwɪki/ (About this soundlisten) WIK-ee) is a hypertext publication collaboratively edited and managed by its own audience directly using a web browser. A typical wiki contains multiple pages for the subjects or scope of the project and may be either open to the public or limited to use within an organization for maintaining its internal knowledge base
</div>
</div>
<div id="overlay"></div>
*，*::after, *::before {
box-sizing: border-box;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 500ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 800px;
max-width: 80%;
}
.modal.active {
transform: translate(-50%, -50%) scale(1);
}
.modal-header {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid black;
}
.modal-header .title {
font-size: 1.25rem;
font-weight: bold;
}
.modal-header .close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.modal-body {
padding: 10px 15px;
}
#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
var openModalButtons = document.querySelectorAll('[data-modal-target]');
var closeModalButtons = document.querySelectorAll('[data-close-button]');
var overlay = document.getElementById('overlay');
openModalButtons.forEach(button => {
button.addEventListener('click', () => {
var modal = document.querySelector(button.dataset.modalTarget);
openModal(modal)
})
});
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
var modal = button.closest('.modal');
closeModal(modal)
})
});
overlay.addEventListener('click', () => {
var modals = document.querySelectorAll('.modal.active');
modals.forEach(modal => {
closeModal(modal)
});
});
function openModal(modal) {
if (modal == null) return;
modal.classList.add('active');
overlay.classList.add('active')
}
function closeModal(modal) {
if (modal == null) return;
modal.classList.remove('active');
overlay.classList.remove('active')
}
You modal has a border, border: 1px solid black; That is causing this thing to happen. Put border on modal.active class instead and you are good to go.
Update: Set your borders only when the modal is active on any of the children components of modal in order to avoid these extra lines.
Codepen:https://codepen.io/emmeiWhite/pen/MWjQrJd
Full Code:
var openModalButtons = document.querySelectorAll('[data-modal-target]');
var closeModalButtons = document.querySelectorAll('[data-close-button]');
var overlay = document.getElementById('overlay');
openModalButtons.forEach(button => {
button.addEventListener('click', () => {
var modal = document.querySelector(button.dataset.modalTarget);
openModal(modal)
})
});
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
var modal = button.closest('.modal');
closeModal(modal)
})
});
overlay.addEventListener('click', () => {
var modals = document.querySelectorAll('.modal.active');
modals.forEach(modal => {
closeModal(modal)
});
});
function openModal(modal) {
if (modal == null) return;
modal.classList.add('active');
overlay.classList.add('active')
}
function closeModal(modal) {
if (modal == null) return;
modal.classList.remove('active');
overlay.classList.remove('active')
}
*，*::after, *::before {
box-sizing: border-box;
}
.modal { /* Removed border from is selector */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 500ms ease-in-out;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 800px;
max-width: 80%;
}
.modal.active {
transform: translate(-50%, -50%) scale(1);
border: 1px solid black; /*--- Added border here ---*/
}
.modal-header {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid black;
}
.modal-header .title {
font-size: 1.25rem;
font-weight: bold;
}
.modal-header .close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.modal-body {
padding: 10px 15px;
}
.modal-body.active{ /* Add border on active class only */
border:1px solid blue;
}
#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
<button data-modal-target="#modal">Open Modal</button>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">Example Modal</div>
<button data-close-button class="closebutton">×</button>
</div>
<div class="modal-body">
A wiki (/ˈwɪki/ (About this soundlisten) WIK-ee) is a hypertext publication collaboratively edited and managed by its own audience directly using a web browser. A typical wiki contains multiple pages for the subjects or scope of the project and may be either open to the public or limited to use within an organization for maintaining its internal knowledge base
</div>
</div>
<div id="overlay"></div>
I have this style for my modal and I wonder where and how do I reverse slideUp effect on modal close.
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal {
display: none;
position: fixed;
overflow: hidden;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-color: black;
color: white;
-webkit-animation: slideIn 0.4s;
animation: slideIn 0.4s;
}
#-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
<div id="myModal" class="modal">
<span class="close">×</span>
<p>Some content here</p>
</div>
Basically I want to modal closing same way it is showing (same animation on modal open and modal close, pure CSS only), can someone help me with that?
I would use a transition that is applied when you add and remove a class:
.modal {
position: fixed;
overflow: hidden;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-color: black;
color: white;
transition: opacity 0.4s, bottom 0.4s; /* animate these properties */
opacity: 1; /* open state is shown */
}
.modal.closed {
opacity: 0; /* close state is hidden and off screen */
bottom: -300px;
}
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
<div id="myModal" class="modal closed">
<span class="close">×</span>
<p>Some content here</p>
</div>
<div id="myBtn">click me</div>
<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(e) {
e.stopPropagation(); /* stop event bubbling up to window */
modal.classList.remove("closed");
}
span.onclick = function() {
modal.classList.add("closed");
}
window.onclick = function(event) {
if (event.target != modal) {
modal.classList.add("closed");
}
}
</script>
I have this little carousel that moves on mousehover
http://jsfiddle.net/dpn3t9p6/1/
HTML
<div id ="container">
<div id="parent">
<div class="contentBlock">
<img alt="Les Bourdelles Des Garcons" src="http://www.deblasiis.com/wp-content/uploads/2016/10/MG_4194-copia-3.png">
<p class="bsubtitle11"><span>Les Bourdelles des Garcons</span></p>
</div>
<div class="contentBlock"><img alt="Religio Universalis" src="http://www.deblasiis.com/wp-content/uploads/2016/11/MG_7877-dOUBLE.jpg"></div>
<div class="contentBlock"><img alt="Isal Bed Ollen" src="http://www.deblasiis.com/wp-content/uploads/2016/11/01-N-1.jpg"></div>
</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'><</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>></span>
CSS
#container {
width:600px;
overflow:hidden;
}
#parent {
width:6000px;
}
.contentBlock {
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
.contentBlock img {
height:600px;
width:auto;
}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active {
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
JS
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
I want a text caption over the image. I can't figure it out, in my tests (https://jsfiddle.net/g5vakqw5/2/) caption will always follow the movement of carousel and won't stay adherent to the image.
Thank you for your time and help
You just need to make the position of the contentBlock relative. See here your jsfiddle
.contentBlock {
position: relative; // <---- here is the change
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
(function () {
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
}());
#container {
width:1980px;
overflow:hidden;
}
#parent {
width:2532px;
}
.contentBlock {
position: relative;
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
.contentBlock img {
height: 850px;
width:auto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.contentBlock:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active {
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
.bsubtitle11 {
font-weight:300;
font-size:35px;
text-align:center;
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 45%;
width: auto;
opacity: 1;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.contentBlock:hover .bsubtitle11 {
opacity: 1;
}
.bsubtitle11 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="container">
<div id="parent">
<div class="contentBlock">
<img alt="Les Bourdelles Des Garcons" src="http://www.deblasiis.com/wp-content/uploads/2016/10/MG_4194-copia-3.png">
<p class="bsubtitle11"><span>Les Bourdelles des Garcons</span></p>
</div>
<div class="contentBlock"><img alt="Religio Universalis" src="http://www.deblasiis.com/wp-content/uploads/2016/11/MG_7877-dOUBLE.jpg"></div>
<div class="contentBlock"><img alt="Isal Bed Ollen" src="http://www.deblasiis.com/wp-content/uploads/2016/11/01-N-1.jpg"></div>
</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'><</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>></span>
If you want The text to be fixed and not me with image carousel, Then create one seprate tag add your text and make it position: absolute.
Use top and left values to place it properly over the image:
CSS:
#container {
width:600px;
overflow:hidden;
position: relative:
}
#container p {
position: absolute;
top: 50px;
left: 50px;
font-size: 24px;
font-weight: bold;
}
JS FIDDLE LINK
I’m creating a styled select menu in which I’m styling an unordered list that is replacing my select element.
<div class="select">
<select name="distance" id="distance" class="select-hidden">
<option value="5.0 5"><font><font>5 mi</font></font></option>
<option value="6.0 4">6 km</option>
<option value="10.0 4" selected="selected"><font><font>10 km</font></font></option></select><div class="select-styled">10 km</div><ul class="select-options" style="display: none;"><li rel="5.0 5"><font><font>5 mi</font></font></li><li rel="6.0 4"><font><font>6 km</font></font></li><li rel="10.0 4"><font><font>10 km</font></font></li></ul>
</div>
I then have this style
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: #000000;
width: 220px;
height: 42px;
}
Right now I’m hard-coding the width (220px) and my question is can I build this in a less rigid way such that the width will automatically be the width of the longest element name? Here is the Fiddle that illustrates my dilemma — https://jsfiddle.net/n73ao02h/13/ .
How about that: https://jsfiddle.net/n73ao02h/14/
A select-box without any width will always style according to its options. So we use that...
First step is to remove the fixed width.
We get the width in JS before we add display:none to it.
We then generate a temporary element styled-select with zero width to automatically get the padding defined in CSS without hardcoding it.
We then have all we need to calculate the new width of your styled select-box:
/* ... */
var $paddingCalculator = $('<div />', {
'class' : "select-styled test"
}).css({
width : 0,
visibility : "hidden"
}).appendTo("body");
var paddingWidth = $paddingCalculator.outerWidth();
$paddingCalculator.remove();
var selectWidth = $this.width() + paddingWidth;
$this.addClass('select-hidden');
if ( !$this.parent().hasClass('select') ) {
var $wrapper = $("<div />", {
'class' : "select"
}).css({
width : selectWidth
});
$this.wrap( $wrapper );
} // if
/* ... */
little addendum:
Keep in mind that both - the original select box and your styled div - need to have the same font-size (and anything text-styling related, such as font-family, font-weight, letter-spacing, ...) so that the calculated dimensions will be correct.
Don't set the width and don't set display:none on the select, plus set white-space:nowrap on your div.select-styled :
$(function() {
$('select').each(function(){
styleSelectMenu($(this));
});
});
// This method applies the styles to our select menu
function styleSelectMenu(selectMenu)
{
var $this = $(selectMenu), numberOfOptions = $(selectMenu).children('option').length;
$this.addClass('select-hidden');
if ( !$this.parent().hasClass('select') ) {
$this.wrap('<div class="select"></div>');
} // if
if ( !$this.next().hasClass('select-styled') ) {
$this.after('<div class="select-styled"></div>');
} // if
var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());
if ( $styledSelect.parent().find('ul').length > 0 ) {
$styledSelect.parent().find('ul').remove();
} // if
var $list = $('<ul />', {
'class': 'select-options'
}).insertAfter($styledSelect);
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children('li');
// This is the event when someone opens the list
$styledSelect.unbind('click')
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.select-styled.active').each(function(){
$(this).removeClass('active').next('ul.select-options').hide();
});
$(this).toggleClass('active').next('ul.select-options').toggle();
});
// This is the event when someone actually selects something from the list
$listItems.unbind('click.selectStyledItem')
$listItems.bind('click.selectStyledItem', function(event) {
clickListItem($styledSelect, $this, $(this), $list);
});
$(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});
var selectedIndex = $this[0].selectedIndex;
if (selectedIndex > 0) {
var name = $this.attr("name")
var selectedText = $( "select[name='" + name + "'] option:selected" ).text();
selectItemFromStyledList($styledSelect, $this, selectedText, $list);
} // if
}
// This is the method that will select an item from the styled list
function selectItemFromStyledList(styledSelect, selectMenu, selectedText, listToHide)
{
$(styledSelect).text(selectedText).removeClass('active');
$(selectMenu).val($(selectMenu).attr('rel'));
$(listToHide).hide();
// Select option in the underlying list so that the form gets submitted
// with the right values
selectedOption = $(selectMenu).find("option").filter(function () { return $(this).html() == selectedText; });
$(selectMenu).find("option[selected='selected']").removeAttr("selected");
$(selectedOption).attr("selected","selected");
} // selectItemFromStyledList
// Called when someone clicks an item from the styled list
// The event data should contain the following parameters:
// styledSelect - the <div> element that contains the styled menu
// selectMenu - the actual form element that contains the items
// listItemClicked - the item that was clicked.
// list - THe <UL> element containig the <li> options
function clickListItem(styledSelect, selectMenu, listItemClicked, list)
{
var $styledSelect = $(styledSelect);
var $selectMenu = $(selectMenu);
var $listItem = $(listItemClicked);
var $list = $(list);
event.stopPropagation();
var selectedText = $listItem.text();
selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list)
} // clickListItem
#statSearchFields {
vertical-align: top;
font-size: 90%;
}
.selectMenu {
font-family: 'Oxygen', sans-serif;
font-size: 20px;
height: 50px;
-webkit-appearance: menulist-button;
}
.select-hidden {
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: black;
height: 42px;
}
.select-styled {
white-space: nowrap;
}
.select-styled {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
padding: 11px 12px;
#include transition(all 0.2s ease-in);
&:after {
content:"";
width: 0;
height: 0;
border: 7px solid transparent;
border-color: black transparent transparent transparent;
position: absolute;
top: 16px;
right: 10px;
}
&:hover {
background-color: darken(gray, 2);
}
&:active, &.active {
background-color: darken(gray, 5);
&:after {
top: 9px;
border-color: transparent transparent $select-color transparent;
}
}
}
.select-options {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0;
padding: 0;
list-style: none;
background-color: darken(gray, 5);
overflow: scroll;
li {
margin: 0;
padding: 12px 0;
text-indent: 15px;
border-top: 1px solid darken(gray, 10);
#include transition(all 0.15s ease-in);
&:hover {
color: gray;
background: black;
}
&[rel="hide"] {
display: none;
}
}
}
#statSearchContainer {
padding: 10px;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
background-color: tan;
display: table;
}
#statSearchContainer h1 {
margin: 5px 0;
font-size: 1.0em;
}
#stat-search-form {
display: block;
padding: 0px;
}
#stat-search-form form input {
vertical-align: middle;
}
#statSearchFields {
vertical-align: top;
font-size: 90%;
}
.searchField {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="statSearchContainer">
<div class="searchField">
Distance<br/>
<select name="distance" id="distance"><option value="5.0 5">5 mi</option>
<option value="6.0 4">6 km</option>
<option selected="selected" value="10.0 4">10 km</option></select>
</div>
<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</div>
</div>