Inputs with Add-ons

Developer
Sean Stopnik
Size
2,620 Kb
Views
8,096
  1. Inputs with Add-ons Previews
  2. Inputs with Add-ons HTML Codes
  3. Inputs with Add-ons CSS Codes

How do I make an inputs with add-ons?

Nothing fancy... just reworking some existing code.. What is a inputs with add-ons? How do you make a inputs with add-ons? This script and codes were developed by Sean Stopnik on 21 December 2022, Wednesday.

Inputs with Add-ons Previews
IQ Test

Inputs with Add-ons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Inputs with Add-ons</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="input-box"> <input class="input-field" type="text" placeholder="Input Text">
</div>
<div class="input-box"> <input class="input-field with-add-on is-before" type="text" placeholder="Input Text"> <span class="add-on is-before">$</span>
</div>
<div class="input-box"> <input class="input-field with-add-on is-after" type="text" placeholder="Input Text"> <span class="add-on is-after">.00</span>
</div>
<div class="input-box"> <input class="input-field with-add-on is-before-and-after" type="text" placeholder="Input Text"> <span class="add-on is-before">$</span> <span class="add-on is-after">.00</span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Inputs with Add-ons - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: sans-serif; padding: 40px;
}
.input-box { margin-bottom: 20px;
}
.input-field { width: 100%; font-size: 16px; line-height: 40px; border-radius: 4px; border: 1px solid #ccc; padding: 0 15px; outline: none; transition: all .15s ease-in;
}
.input-field.with-add-on { width: calc(100% - 50px);
}
.input-field.with-add-on.is-before { border-left: 0; border-radius: 0 4px 4px 0;
}
.input-field.with-add-on.is-after { border-right: 0; border-radius: 4px 0 0 4px;
}
.input-field.with-add-on.is-before-and-after { width: calc(100% - 100px); border-right: 0; border-left: 0; border-radius: 0;
}
.input-field:hover { border: 1px solid #a6a6a6;
}
.input-field:focus { border: 1px solid #00b590;
}
.input-field:focus ~ .add-on { border: 1px solid #00b590;
}
.input-field:focus ~ .add-on.is-before { border-right: 0;
}
.input-field:focus ~ .add-on.is-after { border-left: 0;
}
.add-on { float: left; width: 50px; line-height: 40px; text-align: center; border: 1px solid #ccc; transition: all .15s ease-in;
}
.add-on.is-before { border-right: 0; border-radius: 4px 0 0 4px; box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.1);
}
.add-on.is-after { float: right; border-left: 0; border-radius: 0 4px 4px 0; box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.1);
}
Inputs with Add-ons - Script Codes
Inputs with Add-ons - Script Codes
Home Page Home
Developer Sean Stopnik
Username seanstopnik
Uploaded December 21, 2022
Rating 3
Size 2,620 Kb
Views 8,096
Do you need developer help for Inputs with Add-ons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sean Stopnik (seanstopnik) Script Codes
Name
Simple Slider Effect in CSS - Vertical
Simple Accordian
Simple Slider Effect in CSS - Horizontal
CSS Range Slider
Orbiting Dots
Save to Favorites
CSS Donut Charts
Photo Card
Modular Sass Animation Library
Save to Favorites
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!