spreadwaves

Customize Select dropdown with images using list (ul)

Posted by Karthick Sugumar in CSS, HTML, JQuery

Looking for a solution to customize & add images in select dropdown? Do you think it’s impossible to customize select dropdown without using plugin? No, You’re Wrong, it’s possible. You can use list (ul) to achieve this. You’re in the right article and here is the solution for you.

Feb.26

Pure CSS Overlay Message Popup Modal Box

Posted by Karthick Sugumar in CSS, HTML, JQuery

Are you fed up using boostrap modal box? you will be urged to use lot of css and jquery. Do you want to code your own popup modal box? Here is the perfect solution for you. This tutorial will help you to create overlay message popup box using CSS. HTML Snippet

<html>
<head></head>
<body>
<div id="container"></div>
<!-- popup should come just above body tag -->
<div class="overlay-container">
<div class="black-overlay"></div>
<div class="popup">
<h1>Hello!!!</h1>
<p>
Pure CSS overlay Message popup box
</p>
</div>
</div>
<!-- popup ends -->
</body>
</html>

<html>

<body>

<h1>Hello!!!</h1>

<p>

Pure CSS overlay Message popup box

</p>

</div>

</body>

</html>

CSS Snippet

.overlay-container {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 10000;
    overflow: auto;
}
.black-overlay {
    display: block;
    position: fixed;
    top: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}
.overlay-container .popup {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    max-width: 600px;
    max-height: 400px;
    height: 80%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    padding: 10px;
    text-align: center;
    z-index: 1000;
    background-color: #fff;
    border: 2px dashed #c5c5c5;
    box-shadow: 0 0 0 7px #fff;
}

.overlay-container {

display: block;

width: 100%;

height: 100%;

position: fixed;

top: 0;

z-index: 10000;

overflow: auto;

}

.black-overlay {

display: block;

position: fixed;

top: 0%;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.7);

z-index: 999;

}

.overlay-container .popup {

display: block;

position: absolute;

top: 50%;

left: 50%;

width: 80%;

max-width: 600px;

max-height: 400px;

height: 80%;

transform: translate(-50%, -50%);

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

padding: 10px;

text-align: center;

z-index: 1000;

background-color: #fff;

border: 2px dashed #c5c5c5;

box-shadow: 0 0 0 7px #fff;

}

Oct.16

Select dropdown placeholder

Posted by Karthick Sugumar in CSS, HTML, JQuery

Normally, we have placeholder for input and textarea field. The placeholder will be in gray colored text when you start typing it will turn into black but what about select box? We don’t have any placeholder attribute for select dropdown. In this tutorial, I’ll show you how to create placeholder for select dropdown using jquery. We need, select dropdown Select value should be in gray color and option should be in black. First of all, create normal select box

//normal select box
//HTML
<select>
<option value="">Select value</option>
<option value="value 1">value 1</option>
<option value="value 2">value 2</option>
<option value="value 3">value 3</option>
</select>
//CSS
select {
  color: #000;
  height:30px;
  width:200px;
  border:1px solid #ccc;
  font-size:14px;
  padding:0 10px;
}

//normal select box

//HTML

<option value="">Select value</option>

<option value="value 1">value 1</option>

<option value="value 2">value 2</option>

<option value="value 3">value 3</option>

</select>

//CSS

select {

color: #000;

height:30px;

width:200px;

border:1px solid #ccc;

font-size:14px;

padding:0 10px;

}

Here, Select value and value 1, value 2.. everything will…read more

May.29

Customize Select dropdown with images using list (ul)

Pure CSS Overlay Message Popup Modal Box

Select dropdown placeholder

Fully CSS Animated DropDown Menu