To change the appearance of the select dropdown arrow in an HTML, you can use CSS to target the select element and add a custom arrow. For example, the following CSS code will change the arrow:
select {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 5px;
border: 1px solid #dfdfdf;
border-radius: 2px;
margin-right: 2rem;
padding: .7rem;
padding-right: 2rem;
}
Note that you need to put the CSS code in your CSS file and make sure the -webkit-appearance/-moz-appearance is none.
The countdown functionality can easily be added to HTML code, you do need to set the expiry time and add some jquery code to your project.
<div id="countdown"> <div id="days"></div> <div id="hours"></div> <div id="minutes"></div> <div id="seconds"></div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
function counterTime() {
var endTime = new Date("10 June 2023 12:00:00 GMT+05:30");
endTime = (Date.parse(endTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
if(days >= 0 && hours >= 0 && minutes >= 0 && seconds >= 0){
$("#days").html(days + "<span>Days</span>");
$("#hours").html(hours + "<span>Hours</span>");
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");
}else{
$("#countdown").html('Expired');
}
}
setInterval(function() { counterTime(); }, 1000);
#countdown{
display: flex;
font-family: 'Poppins';
}
#countdown div{
margin: 0 7px;
font-size: 24px;
font-weight: bold;
}
#countdown span{
font-weight: normal;
font-size: 16px;
margin: 0 5px;
}
The jQuery siblings() method is used to get the sibling elements of the selected element.
The following example will highlight the siblings of the <li> element by adding the class .active on document ready.
In the initial step, you need to load the latest version of jQuery into your file.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <ul> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li> </ul>
ul li{
cursor: pointer;
background: #008f8d;
list-style: none;
margin-bottom: 15px;
padding: 7px 15px;
}
.active{
background: black;
color: white;
}
Finally, we will write down our jquery code.
$(document).ready(function(){
$('li').click( function(){
$(this).toggleClass('active').siblings().removeClass('active');
});
});
I’ve been playing around the past week with this CSS animation and that I thought that it would be nice and useful to write down a brief article about how we will create it.
Where can you use this type of effect? Well… you’ll be able to use this effect if you would like to highlight something on the website. I’m using this to highlight the subscribe button.
<button class="btn">Subscribe</button>
In this HTML, we just adding a button with btn class.
.btn {
background: #EF5350;
color: #fff;
padding: 12px 20px;
border: none;
position: relative;
}
In this CSS, simply we added some basic CSS styles. And now for the fun part, let’s create the animation:
.btn:after {
content: '';
position: absolute;
border: 2px solid #F44336;
left: -8px;
top: -7px;
right: 0;
bottom: 0;
animation: pulse 1.5s infinite;
height: 49px;
width: 111px;
z-index: -1;
}
@keyframes pulse {
0% {
transform: scale(.1);
opacity: 1;
}
80% {
transform: scale(1);
opacity: .5;
}
100% {
transform: scale(1);
opacity: 0;
}
}
Simple yet powerful effect because it will get your visitor’s attention to the element on the page that you simply want to be highlighted.
I hope you like it! Let me know where you’ll use this effect!
A tutorial on how to style and customize <input type=”file”> in a very semantic, accessible way using the element with CSS only. No need to add a single line jquery code. There are quite few examples for “customizing” the <input type=”file” /> element.
HTML Code
<input type="file" id="file" /> <label for="file" class="btn">choose a file</label> <br> <input type="file" id="file" /> <label for="file" class="btn-1">upload file</label> <br><br> <input type="file" id="file" /> <label for="file" class="btn-2">upload file</label> <br> <input type="file" id="file" /> <label for="file" class="btn-3">select file</label>
CSS Code
[type="file"] {
height: 0;
overflow: hidden;
width: 0;
}
label {
font-family: "lato", sans-serif;
border: none;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
margin-bottom: 15px;
outline: none;
padding: 15px 50px;
position: relative;
transition: all 0.3s;
}
.btn{
background: #f7347a;
}
.btn:hover{
background: #800080;
}
.btn-1 {
background: #ffd700;
box-shadow: 0 6px #ffa500;
}
.btn-1:hover {
box-shadow: 0 0 #ffa500;
}
.btn-2 {
background: #800080;
border-radius: 100px;
}
.btn-2:hover {
background: #ff80ed;
}
.btn-3 {
background: #008000;
border-radius: 0px;
}
.btn-3:hover {
background: #065535;
}
Although scrollbar has just a small area on the web browser, to me — as an interface designer — it’s not that tiny, nor okay to ignore. If you care about every small detail of the website, this short tutorial would be helpful for you. To customize your website’s scrollbar, there are only a couple of lines of code in your CSS file needed. You don’t even need to write JavaScript to customize it! The following code snippet shows CSS code to customize the web browser’s scrollbar.
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
background-color: #f00;
}
::-webkit-scrollbar {
width: 6px;
background-color: #ff0;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
border-radius: 10px;
background-color: #ff0;
}
Customizing a web browser’s scrollbar is a non-standard method to styling, so you would like to use -webkit- vendor prefix to use pseudo-elements above. Only Webkit browsers(e.g., Chrome, Safari) support these properties. Other browsers like Firefox or IE don’t support this method.
You don’t need jQuery for making this trick. You can use simple CSS animation instead, and it will be more performance and simplicity.
In my example, we just add a div with a block class name.
<div class="block"></div>
After that, we add the CSS property
html, body {
width: 100%;
height: 100%;
}
@keyframes color-animation {
0% {
background: #ad1457;
}
50% {
background: #6a1b9a;
}
100% {
background: #bbdefb
}
}
.block {
width: 100%;
height: 100%;
animation: color-animation 3s infinite linear alternate;
}
In this code, we created simple css animation, which changes the colors of our block.
Today we are going to create a Countdown timer that shows minutes & Seconds.
In the initial step, you need to load the latest version of jQuery into your file.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Now the important step to create the HMTL markup. Let’s create a div with a class name countdown. Remember, we will use this class in jQuery.
<div class="countdown"></div>
Finally, we will write down our jquery code.
<script type="text/javascript">
var timer2 = "02:00";
var interval = setInterval(function() {
var timer = timer2.split(':');
//by parsing integer, I avoid all extra string processing
var minutes = parseInt(timer[0], 10);
var seconds = parseInt(timer[1], 10);
--seconds;
minutes = (seconds < 0) ? --minutes : minutes;
if (minutes < 0) clearInterval(interval);
seconds = (seconds < 0) ? 59 : seconds;
seconds = (seconds < 10) ? '0' + seconds : seconds;
//minutes = (minutes < 10) ? minutes : minutes;
$('.countdown').html(minutes + ':' + seconds);
timer2 = minutes + ':' + seconds;
}, 1000);
</script>
Have you ever wanted to change the text color of a select option element of a drop down?
<select>
<optgroup label="select one option">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</optgroup>
</select>
Just copy paste the below css in your css file.
select option{
color: red;
}