Develop Reference

How to make a cropped border in an input?

I need to create an input with a border that will change when the input is focused.
The inputs should works in that way:
When input is not focused and is empty, the label should be inside the input:
Input without focus
When user focus the input, or input is filled, the label will move up and the border should be cropped so the label is not obscured by the border.
Input with focus
I've tried with adding before element on label with background, but i realized this is not the correct way because input has not background itself and depend on the subpage there can be other background color and finally the resould looked like this:
Input with focus
Input without focus
Could you please help me with this?

You can try the below code
HTML
<div class="input-control">
<input type="text" required>
<label>Placeholder</label>
</div>
CSS
.input-control {
position: relative;
}
input {
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
}
input:focus {
border: 1px solid red;
background-color:#fff;
}
label {
color: #999;
position: absolute;
pointer-events: none;
left: 10px;
top: 10px;
transition: 0.2s;
}
input:focus ~ label,
input:valid ~ label {
top: -8px;
left: 10px;
font-size: 12px;
color: red;
background-color:#fff;
padding:0 5px 0 5px;
}

You can go with this approach
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 62.5%;
background: #FFF;
}
div.centralize {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
div.input-block {
position: relative;
}
div.input-block input {
font-weight: 500;
font-size: 1.6rem;
color: #495055;
width: 350px;
padding: 15px 15px;
border-radius: 1rem;
border: 2px solid #D9D9D9;
outline:none;
}
div.input-block span.placeholder {
position: absolute;
margin: 17px 0;
padding: 0 4px;
font-family: Roboto, sans-serif;
color: #6c757d;
display: flex;
align-items: center;
font-size: 1.6rem;
top: 0;
left: 17px;
transition: all 0.2s;
transform-origin: 0% 0%;
background: none;
pointer-events: none;
}
div.input-block input:valid + span.placeholder,
div.input-block input:focus + span.placeholder {
transform: scale(0.8) translateY(-30px);
background: #fff;
}
div.input-block input:focus{
color: #284B63;
border-color: #284B63;
}
div.input-block input:focus + span.placeholder {
color: #284B63;
}
<div class="centralize">
<div class="input-block">
<input type="text" name="input-text" id="input-text" required spellcheck="false">
<span class="placeholder">
Placeholder
</span>
</div>
</div>

Check out the code below. There's no way to actually crop a border, but you can construct the top border from 2 separate elements and then shrink the right element as needed - this way you don't have to worry about the flaws of the background workaround.
let field = document.querySelector('.field');
let input = document.querySelector('.input-field');
let label = document.querySelector('.label');
let border = document.querySelector('.shrink');
input.addEventListener("click", () => {
let displacement = label.offsetWidth + 14;
// get label width, plus hardcoded gap which should ideally be computed (the initial 10px gap + 4px to give the label some space)
field.classList.add('active');
border.style.width = 'calc(100% - ' + displacement + 'px)';
})
body {
background: URL('https://www.toptal.com/designers/subtlepatterns/uploads/just-waves.png')
}
* {
font-family: sans-serif;
}
.field {
position: relative;
width: auto;
display: inline-block;
}
input {
border: none;
padding: 12px;
border-radius: 10px;
background: transparent;
outline: none;
border: 2px solid #000;
border-top: none;
position: relative;
}
.b1 {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 8px;
border-radius: 10px 0 0 0;
border-top: 2px solid #000;
}
.b2 {
content: '';
position: absolute;
top: 0;
right: 0;
width: calc(100% - 10px); /* subtract 10px to account for left corner border */
height: 8px;
border-radius: 0 10px 0 0;
border-top: 2px solid #000;
}
label {
position: absolute;
top: 12px;
left: 12px;
transition: all ease-in-out .1s;
}
.field.active label {
transform: translateY(-20px);
}
<div class="field">
<div class="top-border">
<div class="b1"></div>
<div class="b2 shrink"></div>
</div>
<label class="label">test label</label>
<input type="text" class="input-field">
</div>

Different content showing on click

I managed to make it so that when I click on a button, a div shows/hides, thanks to this simple script:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Now I'd like to do the same thing for multiple divs in the same page, but if I use that same script, it will show every hidden div in my page, not just the one below the clicked button. Can anyone help me understand how to modify it?
Here's My DEMO you can clearly see the problem.
EDIT : The left square is supposed to show an image, but I haven't uploaded one yet.

You should use $(this) to refer to the current clicked div, and since you have the same class on the both of button you should check which one of them is clicked the perform the operation related with it :
$('.show_hide').click(function(){
if($(this).text()=='Close') //Close Case
$(this).closest('.slidingDiv').slideToggle();
else //More Case
$(this).closest('.news_button').next('.slidingDiv').slideToggle();
});
Hope this helps.
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
if($(this).text()=='Close') //Close Case
$(this).closest('.slidingDiv').slideToggle();
else //More Case
$(this).closest('.news_button').next('.slidingDiv').slideToggle();
});
});
.news_div_blue{
background-color: #000000;
color: #ffffff;
margin: auto;
margin-top: 10px;
width: 1050px;
height: 210px;
}
.news_div_blue a{
color: #ffffff;
margin-top: 0px;
}
.title_div_blue{
z-index: 90;
background-color: #000000;
width: 1050px;
height: 210px;
margin-bottom: 0px;
}
.news_p_blue{
margin-left: 10px;
margin-top: 5px;
width: 98%;
color: #ffffff;
font-family:"Myriad Pro","Trebuchet MS", sans-serif;
color:#404040;
font-size: 16px;
text-align: justify;
}
/* HIDE - SHOW */
.slidingDiv {
height: auto;
width: 1048px;
background-color: #E8f1fd;
margin: auto;
margin-top: 0px;
z-index: 100;
border: 1px solid #0E4186;
}
.show_hide {
display:none;
}
/*******/
.news_image{
float: left;
width: 23%;
border: 1px solid white;
height: 150px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.news_title_blue{
font-family:"Myriad Pro","Trebuchet MS", sans-serif;
color: #ffffff;
float: right;
width: 73%;
border: 1px solid white;
height: 150px;
text-align: justify;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.news_button{
float: right;
margin-right: 10px;
margin-top: -40px;
}
/* Button Graphic */
.button_news {
border-top: 1px solid #ffffff;
background: #3663a3;
background: -webkit-gradient(linear, left top, left bottom, from(#0e4086), to(#3663a3));
background: -webkit-linear-gradient(top, #0e4086, #3663a3);
background: -moz-linear-gradient(top, #0e4086, #3663a3);
background: -ms-linear-gradient(top, #0e4086, #3663a3);
background: -o-linear-gradient(top, #0e4086, #3663a3);
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 15px;
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
text-decoration: none;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news_div_blue">
<div class="title_div_blue">
<div class="news_image"><img src=""/></div>
<div class="news_title_blue">Title</div>
</div> <!-- END title_div_blue -->
<div class="news_button"><button class="button_news">More</button></div>
<div class="slidingDiv">
<p class="news_p_blue">
This is the first hidden text
<br/>
<br/>
<br/>
...
</p>
<div class="news_button"><button class="button_news">Close</button></div>
</div> <!-- END slidingDiv -->
<div class="title_div_blue">
<div class="news_image"><img src=""/></div>
<div class="news_title_blue">Title2</div>
</div> <!-- END title_div_blue -->
<div class="news_button"><button class="button_news">More</button></div>
<div class="slidingDiv">
<p class="news_p_blue">
This is the second hidden text
<br/>
<br/>
<br/>
...
</p>
<div class="news_button"><button class="button_news">Close</button></div>
</div> <!-- END slidingDiv -->
</div> <!-- END news_div_blue -->

Modal Window with scroll bar

So, I have a modal window in a website that I'm devloping.
The modal is made out of pure CSS, to open it and close it I have javascript functions wich change the css elements to make the modal show/hide.
CSS of the modal:
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog > div {
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background:white;
display: table;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.btnEncomendarProduto {
background-color:#D60E12;
color:white;
border-radius:5px;
font-size: 12px;
white-space:normal;
cursor:pointer;
text-transform: initial;
border:1px solid #D60E12;
margin-top:3px;
}
</style>
So the problem is when I have a something that displays too much information on the modal, this happens:
So I think I need a scroll bar on the div inside the modal. How can I do that?
Thank you.

If you have an inner div that expands with the content of the actual modal, you can set the max-height of that div to be something--like 75vh--and add overflow-y: auto to that container, and it will automatically add a scrollbar when the content gets longer than that set max-height.
HTML
<div class="Content">
<p>
This is the page contents.
</p>
</div>
<div class="Modal" id="modal">
<div class="Contents">
<h1>Modal</h1>
<p id="text-area">
[large amounts of content]
</p>
</div>
</div>
CSS
body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.Content
{
position: relative;
width: 100%;
}
.Modal
{
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3); // light grey background
}
.Modal.Open
{
display: block;
}
.Modal .Contents
{
overflow-y: auto;
display: block;
position: relative;
width: 90%;
margin: 5% auto 0;
max-height: 90vh;
padding: 5px;
background: #fff;
}
Note the .Modal .Contents selector and how it works.
JSFiddle Example: https://jsfiddle.net/nj6r0sjw/

Cannot hack pass css plugin to make two input elements appears in-line?

I'm using a plugin for drop down menu. The link for plugin is here.. I want to add this code, into already made html code, but first I wanted to tested. So, far it all works fine until I try to make two copies of widget and make them appear side by side. The default is for input element to appear in-line but the plugin css is pushing it down turning into a single column (stacked) I don't want this. Here is HTML code.
HTML
<head>
<script type="text/javascript" src="lib/jquery-1.2.6.js"></script>
<script type="text/javascript" src="lib/jquery.mcdropdown.js"></script>
<!---// load the mcDropdown CSS stylesheet //--->
<link type="text/css" href="css/jquery.mcdropdown.css" rel="stylesheet" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body>
<ul id="categorymenu" class="mcdropdown_menu">
<li rel="1">
Arts & Humanities
<ul>
<li rel="2">
Photography
<ul>
<li rel="3">
3D
</li>
<li rel="4">
Digital
</li>
</ul>
</li>
<li rel="5">
History
</li>
<li rel="6">
Literature
</li>
</ul>
</li>
<li rel="7">
Business & Economy
</li>
<li rel="8">
Computers & Internet
</li>
<li rel="9">
Education
</li>
<li rel="11">
Entertainment
<ul>
<li rel="12">
Movies
</li>
<li rel="13">
TV Shows
</li>
<li rel="14">
Music
</li>
<li rel="15">
Humor
</li>
</ul>
</li>
<li rel="10">
Health
</li>
</ul>
<div class="test"> <input type="text" class="category" name="category" id="category" value="" />
<input type="text" class="category" name="category" id="category_1" value="" /></div>
JAVASCRIPT
<script>
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu");
$("#category_1").mcDropdown("#categorymenu");
});
</script>
</body>
</html>
CSS PLUGIN
/*
styles for the psuedo-select box
*/
div.mcdropdown {
position: absolute;
border: 1px solid #8e9daa;
padding: 1px;
display: -moz-inline-block;
display: inline-block;
width: 408px;
height: 14px;
padding: 2px;
}
/* style either the input or div where the plug-in is attached to */
div.mcdropdown input,
div.mcdropdown div {
position: absolute;
background-color: #fff;
left: 0;
top: 0;
width: 98%;
border: 0;
padding: 2px 0 0 3px;
font: 11px Arial, Helvetica, sans-serif;
}
div.mcdropdown a {
position: absolute;
right: 1px;
top: 1px;
background: transparent url(../images/mcdropdown/mcdd_select_button_sprite.gif) no-repeat top left;
display: -moz-inline-block;
display: inline-block;
height: 16px;
width: 15px;
text-decoration: none;
font-size: 0pt;
z-index: 2;
outline: 0;
}
div.mcdropdown a:hover, div.mcdropdown a:focus {
background-position: 0% -16px;
}
div.mcdropdown a:active {
background-position: 0% -32px;
outline: none; /* hide dotted outline in Firefox */
}
div.mcdropdownDisabled {
background-color: #e1e0e0;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
div.mcdropdownDisabled input {
cursor: default;
}
div.mcdropdownDisabled a:hover, div.mcdropdownDisabled a:focus {
background-position: 0 0;
cursor: default;
}
/*
styles for the dropdown menu
*/
ul.mcdropdown_menu {
display: none;
margin: 0px;
padding: 0px;
list-style-type: none;
/* float so we can calculate the size of the columns */
float: left;
clear: both;
z-index: 10000;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
ul.mcdropdown_menu ul {
display: none;
font: 11px Arial, Helvetica, sans-serif;
/* float so we can calculate the size of the columns */
/*
float: left;
*/
}
/* -- Sub-Menus -- */
ul.mcdropdown_menu ul {
position: absolute;
list-style-type: none;
margin: 0px;
margin-left: 30px;
padding: 0px;
z-index: 10000;
}
ul.mcdropdown_menu ul li {
margin: 0px;
min-width: 150px;
_width: 150px; /* ie6 min-width hack */
}
/* color schema */
ul.mcdropdown_menu {
/*
height: 19px;
*/
height: auto;
background-color: #e1e0e0;
padding: 5px 5px;
/* define font here for IE6 */
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_menu li {
padding: 2px 20px 2px 6px;
/* this is needed to ensure that all browsers have the same line-height--fixes issues in Chrome (Mac) and IE10 */
line-height: 14px;
}
/* we don't use "ul.mcdropdown_menu > li" here so that IE6 knows how to style the root level */
ul.mcdropdown_menu li.mc_root {
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 20px 2px 6px;
margin: 0 10px;
}
ul.mcdropdown_menu > li.mc_endcol {
border-bottom: 1px solid #fff;
}
/* this is for IE6 only */
ul.mcdropdown_menu li.mc_hover {
background-color: #ccc !important;
}
ul.mcdropdown_menu > li:hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_menu > li:hover.mc_endcol {
border-bottom: 1px solid #999;
}
ul.mcdropdown_menu > li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #999;
}
ul.mcdropdown_menu li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_menu li:hover.mc_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
ul.mcdropdown_menu ul {
background: #f0f0f0;
/* add a slight border for better visualization of deep menus */
border: 1px solid #d0d0d0;
padding-bottom: 10px;
/* IE 6/7 will bleed through the background color if we don't set the visibility to hidden */
visibility: hidden;
}
ul.mcdropdown_menu ul li {
background: #f0f0f0;
padding-left: 16px !important;
border-top: 1px solid #fff;
color: #666;
white-space: nowrap;
}
ul.mcdropdown_menu ul li.mc_firstrow {
border-top: 1px solid #f0f0f0;
}
ul.mcdropdown_menu ul li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_menu ul li:hover {
background-color: #d6d6d6;
border-top: 1px solid #dedede;
color: #666;
}
ul.mcdropdown_menu ul li.mc_endcol:hover {
border-bottom: 1px solid #dedede;
}
ul.mcdropdown_menu ul li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #dedede;
}
/*
* drop down shadows
*/
div.mcdropdown_shadow {
display: none;
position: absolute;
margin: 3px 0 0 3px;
/* for IE6, we use just a square transparent image */
background: #000;
filter :alpha(opacity=33);
}
/* ie6 ignores this selector */
html>body div.mcdropdown_shadow {
/* let's use a transparent PNG */
margin: 5px 0 0 5px;
padding: 5px 0 0 5px;
background: transparent url(../images/mcdropdown/shadow.png) right bottom no-repeat !important;
/* remove the filter for IE7 */
filter: none;
}
/*
* styles for the dropdown menu
*/
/* autocomplete styles */
ul.mcdropdown_autocomplete {
display: block;
position: absolute;
height: auto;
max-height: 210px;
overflow-x: hidden;
overflow-y: auto;
clear: both;
padding: 5px 10px;
background-color: #e1e0e0;
z-index: 10000;
margin: 0px;
list-style-type: none;
width: 392px;
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_autocomplete ul {
display: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.mcdropdown_autocomplete ul li {
margin: 0px;
}
ul.mcdropdown_autocomplete li {
display: block;
font: 11px Arial, Helvetica, sans-serif;
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 26px 2px 6px;
}
ul.mcdropdown_autocomplete li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_autocomplete li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_autocomplete li.mc_hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_autocomplete li.mc_hover_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
Things I have tried that Failed
.category {
float: left;
display: block;
}
#category_1 {
margin-left: 20px; /* or space you want..*/
}
<style>
#category, #category_1{
display: inline;
}
</style>
Please guide me. Thanks.

Add this to your css:
div.test > div {
float: left;
width: 408px;
margin-right: 20px;
}

According to the plugin page:
NOTE: The initial element that you apply the plug-in to is destroyed
and replaced with a new input element with the same id attribute.
While the mcDropdown() method does not destroy the jQuery chain, it
does effectively return a "dirty" reference (since the original
element no longer exists.) Because of this, you'll want to make sure
that the mcDropdown() method is the last call in your chain. Also, if
you plan on caching a reference to the element, you will need to
create the cached instance after you initiated the widget.
Honestly I'm not even sure if that's related.
But your code (albeit not functioning as advertised) is lining up the way you want when I look at it.
Here's a fiddle for you to see what I see.
Keep in mind of course that I'm not sure why it's not functioning properly. I put it on my desktop and replicated the whole example as-is and still nothing. But the input boxes are nice and neat :)
I did notice you left off the jquery.bgiframe.js file but I don't think that's necessary.

Add gradient to pseudo element

how can i apply the yellow gradient to the white arrow?
here is the fiddle link:
http://jsfiddle.net/VNnKR/
$('.white').hover(function() {
$(this).addClass('gradient');
})

I found a solution, note that it only works with a solid background.
HTML:
<div class="arrow">
START HERE!
</div>
CSS:
body {
background: #6cc5c3;
}
.arrow {
margin-top: 150px;
position: relative;
font-weight: bold;
margin-bottom: 5px;
height: 20px;
padding: 10px 30px 10px 10px;
width: 140px;
color: #6cc5c3;
background: #fff;
text-align: center;
}
.arrow:after {
content:'';
height: 0;
width: 0;
display: block;
border-color: #6cc5c3 #6cc5c3 #6cc5c3 transparent;
border-width: 20px;
border-style: solid;
position: absolute;
top: 0;
right: -20px;
}
.gradient {
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
}
DEMO
The arrow is transparent, and the rest of the "arrow" is the same as the body background color.