Jump to content
Sign in to follow this  
daav`

Wyrównanie placeholder`a do górnej krawędzi inputa

Recommended Posts

Cześć, w jaki sposób mogę wyrównać placeholder do górnej krawędzi inputa?

 

 

Próbowałem z line-height, później position:relative dla inputa a dla placeholdera absolute i top: 0, lecz to nic nie daje ;/

 

Share this post


Link to post

To jest <input> czy <textarea>?

  • Like 1

Share this post


Link to post

Część kodu:

HTML

<div class="container-form">
	<form>
		<input type="text" placeholder="Imię i Nazwisko">
		<input type="email" placeholder="Adres E-Mail">
		<input type="text" placeholder="Wypełnij Treść">
		<input type="submit" value="Wyślij">
	</form>
</div>

CSS

.container-kontakt .container-form form{
	float: right;
	display: flex;
	flex-direction: column;
}
.container-kontakt .container-form form input{
	font-family: 'Lato', sans-serif;
	width: 438px;
	margin-bottom: 8px;
	padding: 8px 20px;
	border: none;
	outline: none;
	font-color: #000;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
}
.container-kontakt .container-form form input:last-child{
	background-color: #00b034;
	color: #fff;
	width: 0;
	width: 100px;
	cursor: pointer;
	text-align: center;
}
.container-kontakt .container-form form input:nth-child(3){
	height: 180px;
}

 

Edited by veinn

Share this post


Link to post

To koniecznie musi być jako <input>? Przecież lepszym rozwiązaniem jest <textarea>

  • Like 1

Share this post


Link to post
12 minut temu, Salva napisał:

To koniecznie musi być jako <input>? Przecież lepszym rozwiązaniem jest <textarea>

Dzięki, ogarnąłem właśnie w taki sposób ;-)

Lecz mam kolejny problem, ponieważ nie mam pojęcia jak wyrównać zielony button do prawej.

Jest on w formie, który ma float: right; więc powinno zadziałać dziedziczenie, prawda?

Dodając float:right do button nie ma efektu.

 

 

Cały KOD sekcji "Kontakt"

HTML

	<section>
		<div class="container-kontakt">
			<div class="font-container">
				<div class="line left"></div>
				<p>kon<span>takt</span>
				<div class="line right"></div>
			</div>
			<div class="container-form">
				<form>
					<input type="text" placeholder="Imię i Nazwisko">
					<input type="email" placeholder="Adres E-Mail">
					<textarea placeholder="Wypełnij Treść"></textarea>
					<input type="submit" value="Wyślij">
				</form>
			</div>
			<div class="container-vertical-line"></div>
			<div class="container-dane">
			</div>
		</div>
	</section>

CSS

.container-kontakt{
	width: 100%;
	height: 500px;
	background: #161616;
}
.container-kontakt .font-container{
	width: 500px;
	height: 50px;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
}
.container-kontakt .font-container p{
	margin: 0;
	color: #fff;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 28px;
	float: left;
}
.container-kontakt .font-container p span{
	font-weight: 700;
}
.container-kontakt .font-container .line{
	display: block;
	width: 84px;
	height: 1px;
	background-color: #333;
	float: left;
	margin-top: 5px;
}
.container-kontakt .container-form{
	width: 48%;
	height: 410px;
	float: left;
}
.container-kontakt .container-form form{
	float: right;
	display: flex;
	flex-direction: column;
}
.container-kontakt .container-form form input{
	font-family: 'Lato', sans-serif;
	width: 438px;
	margin-bottom: 8px;
	padding: 8px 20px;
	border: none;
	outline: none;
	font-color: #000;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
}
.container-kontakt .container-form form input:last-child{
	background-color: #00b034;
	color: #fff;
	width: 0;
	width: 100px;
	cursor: pointer;
	text-align: center;
}
.container-kontakt .container-form form textarea{
	font-family: 'Lato', sans-serif;
	height: 180px;
	border: none;
	outline: none;
	font-size: 14px;
	font-color: #fff;
	padding: 8px 20px;
	margin-bottom: 8px;
}
.container-kontakt .container-dane{
	width: 48%;
	height: 410px;
	float: right;
}

 

Edited by veinn

Share this post


Link to post

Dla <form> masz wrzucony flex, więc float automatycznie działać nie będzie. Daj dla <form>:

align-items: flex-end;

i powinno zadziałać.

  • Like 2

Share this post


Link to post
.container-kontakt .container-form form input:last-child {
margin-left:auto;
}

 

 

  • Like 2

Share this post


Link to post

Niestety, ale nie pomogło, demko --> link

 

/////edit///////

Nie zauważyłem posta @Kirito. , dzięki można zamknąć ;-)

Edited by veinn

Share this post


Link to post

Pamiętaj, że nie ma czegoś takiego jak font-color, jest samo color.

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  
×
×
  • Create New...