CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 1110

Html displaying line in wrong spot

I am trying to follow a tutorial so that when an input is selected the label rises and the line changes color. The problem is it creates a second line that displays in the middle of the input.

While not selected While selected

It should display like the one on this site here

I tried comparing the code then typed it exactly and it still isn't working.

My code is

html,
body {
  height: 100%;
}
body {
  display: grid;
  font-family: Avenir;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
.inp {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 280px;
}
.inp .label {
  position: absolute;
  top: 16px;
  left: 0;
  font-size: 16px;
  color: #9098a9;
  font-weight: 500;
  transform-origin: 0 0;
  transition: all 0.2s ease;
}
.inp .border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: #07f;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: all 0.15s ease;
}
.inp input {
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  font-family: inherit;
  padding: 12px 0;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid #c8ccd4;
  background: none;
  border-radius: 0;
  color: #223254;
  transition: all 0.15s ease;
}
.inp input:hover {
  background: rgba(34,50,84,0.03);
}
.inp input:not(:placeholder-shown) + span {
  color: #5a667f;
  transform: translateY(-26px) scale(0.75);
}
.inp input:focus {
  background: none;
  outline: none;
}
.inp input:focus + span {
  color: #07f;
  transform: translateY(-26px) scale(0.75);
}
.inp input:focus + span + .border {
  transform: scaleX(1);
}
<!DOCTYPE html>
<html>
	<head>
		. . .
	</head>

	<body bgcolor="#f4b942">
		<div>
			<label for="inp" class="inp">
				  <input type="text" id="inp" placeholder="&nbsp;">
				  <span class="label">Insert Values</span>
				  <span class="border"></span>
			</label>
		</div>
   </body>
  </html>

Upvotes: 1

Views: 147

Answers (1)

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21756

Your code is not exactly same as the example link you mentioned. You have added <label> inside a <div>. <div> has a default display: block which is caused this issue. So there are two options 1) Remove <div> 2) Add change display: block to some other values like display: flex. It will work.

Below is code:

html,
body {
  height: 100%;
}

body {
  display: grid;
  font-family: Avenir;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

.div {
  display: flex;
}

.inp {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 280px;
}

.inp .label {
  position: absolute;
  top: 16px;
  left: 0;
  font-size: 16px;
  color: #9098a9;
  font-weight: 500;
  transform-origin: 0 0;
  transition: all 0.2s ease;
}

.inp .border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: #07f;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: all 0.15s ease;
}

.inp input {
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  font-family: inherit;
  padding: 12px 0;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid #c8ccd4;
  background: none;
  border-radius: 0;
  color: #223254;
  transition: all 0.15s ease;
}

.inp input:hover {
  background: rgba(34, 50, 84, 0.03);
}

.inp input:not(:placeholder-shown)+span {
  color: #5a667f;
  transform: translateY(-26px) scale(0.75);
}

.inp input:focus {
  background: none;
  outline: none;
}

.inp input:focus+span {
  color: #07f;
  transform: translateY(-26px) scale(0.75);
}
<!DOCTYPE html>
<html>

<head>
  . . .
</head>

<body bgcolor="#f4b942">
  <div class="div">
    <label for="inp" class="inp">
				  <input type="text" id="inp" placeholder="&nbsp;">
				  <span class="label">Insert Values</span>
				  <span class="border"></span>
			</label>
  </div>
</body>

</html>

Upvotes: 1

Related Questions