All geek questions in one place

How to remove overlap using read-only format and input type using HTML

I created one form with two Name and E-mail fields with input type text and read-only format when I try to run this code. My output is overlapped by text value and text fields.

Here is my code:

$(document).ready(function() {

  $('input').blur(function() {

    // check if the input has any value (if we've typed into it)
    if ($(this).val())
      $(this).addClass('used');
    else
      $(this).removeClass('used');
  });

});
/* form starting stylings ------------------------------- */

.group {
  position: relative;
  margin-bottom: 45px;
}

input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
}

input:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
}


/* active state */

input:focus~label,
input:valid~label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
}

.bar {
  position: relative;
  display: block;
  width: 300px;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}


/* active state */

input:focus~.bar:before,
input:focus~.bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}


/* active state */

input:focus~.highlight {
  animation: inputHighlighter 0.3s ease;
}


/* ANIMATIONS ================ */

@keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <br/>
  <br/>

  <div class="group">
    <input type="text" readonly value="shruthi">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
  </div>

  <div class="group">
    <input type="text" readonly value="shruthi@gmail.com">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
  </div>

</form>
Run codeHide result

But my expected conclusion is that I want a form without any overlapping text fields with text values.

I do not know what is wrong with my code. Can anyone help?

+4
source share
4 answers
Attribute

readonlydistorts CSS. So I created a class with a name disabled-controlthat will force the input to behave like a field readonly.

/* prevent typing */
$('.disabled-control').keypress(function(e) {
    e.preventDefault();
});

/* blurring so caret doesn't show; timeout so underline transition
ends before blurring */
$('.disabled-control').click(function(e) {
    var me = $(this);
    setTimeout(function(){ me.blur(); }, 200);  
});
.group 			  { 
  position:relative; 
  margin-bottom:45px; 
}
input 	, input:read-only			{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

 .disabled-control{
      opacity: 0.4;
      cursor: not-allowed;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form style="margin-top: 50px;">
    
    <div class="group">      
      <input type="text" required value="shruthi" class="disabled-control">
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>
      
    <div class="group">      
      <input type="text" required value="shruthi@gmail.com" class="disabled-control">
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>
    
  </form>
Run codeHide result
0
source

top: -20px. .

$(document).ready(function() {

  $('input').blur(function() {

    // check if the input has any value (if we've typed into it)
    if ($(this).val())
      $(this).addClass('used');
    else
      $(this).removeClass('used');
  });

});
/* form starting stylings ------------------------------- */

.group {
  position: relative;
  margin-bottom: 45px;
}

input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
}

input:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: -20px;
  transition: 0.2s ease all;
}


/* active state */

input:focus~label,
input:valid~label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
}

.bar {
  position: relative;
  display: block;
  width: 300px;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}


/* active state */

input:focus~.bar:before,
input:focus~.bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}


/* active state */

input:focus~.highlight {
  animation: inputHighlighter 0.3s ease;
}


/* ANIMATIONS ================ */

@keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <br/>
  <br/>

  <div class="group">
    <input type="text" readonly value="shruthi">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
  </div>

  <div class="group">
    <input type="text" readonly value="shruthi@gmail.com">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
  </div>

</form>
Hide result
+1

This is my own creation. My error was in css, I edit that I got my expected result. Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>helllo</title>


    <style>
    /* form starting stylings ------------------------------- */
.group        {
  position:relative;
  margin-bottom:45px;
}
input         {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus     { outline:none; }
    label          {
  color:#999;
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  top:-20px;
  font-size:14px;
  color:#5264AE;
  transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label     {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}
    .bar  { position:relative; display:block; width:300px; }
.bar:before, .bar:after   {
  content:'';
  height:2px;
  width:0;
  bottom:1px;
  position:absolute;
  background:#5264AE;
  transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}
    .highlight {
  position:absolute;
  height:60%;
  width:100px;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@keyframes inputHighlighter {
  from  { background:#5264AE; }
  to    { width:0; background:transparent; }
}
</style>
</head>
<body>
    <form>
    <br/>
    <br/>

  <div class="group">
    <input type="text" readonly value="shruthi">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
  </div>

  <div class="group">
    <input type="text" readonly value="shruthi@gmail.com" id="well">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
  </div>

</form>

<script>
    $(document).ready(function() {

  $('input').blur(function() {


    // check if the input has any value (if we've typed into it)
    if ($(this).val())
      $(this).addClass('used');
    else
      $(this).removeClass('used');
  });

});
</script>

</body>
</html>
+1
source

For what I understood about your problem,
your shortcut is absolute, which overlaps your label and the input field just change the position of the label to static or relative, will work if you also delete this block

label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute; // remove this block it works
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
0
source

Source: https://habr.com/ru/post/1689041/

More articles:


All Articles