نحوه ی استایل دهی به placeholder ها

Question

نحوه ی استایل دهی به placeholder ها همون طور که استاد گفتن مثل سودوالمنت هاست دقیقا

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" /> 
    <title>Placeholder Style</title>
  </head>
  <body>
    <form action="" class="login">
      <input type="text" class="username" placeholder="نام کاربری ...">
      <input type="text" class="password" placeholder="رمز عبور ...">
      <div class="wrapper">
      <button type="submit">ارسال</button>
    </div>
    </form>
  </body>
</html>

css

البته استایل زیاد زیبا و خاص فکر نمیکنم بشه بهش داد و به همون بکگراند کالر و استایل های فونت بسنده کردم

@font-face{
  font-family: sahel;
  src: url("Sahel.woff") format("woff");
}

body,*{
  font-family: sahel;
  direction: rtl;
  background-color: #f6f9fb;
  box-sizing: border-box;
}

.login{
  width: 300px;
  height: auto;
 
  margin: 50px auto;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 1px 1px 5px black;
}
.login input{
  width: 100%;
  background-color: #efefef;
  display: block;
  margin-bottom: 15px;
  border: none;
  height: 30px;
  padding: 10px;
}
.login button{
  border-radius: 2px;
  background-color: green;
  color: white;
  border: none;
  padding: 5px 10px;
  box-shadow: 1px 1px 4px black;
}

.login input:focus{
  outline: 2px solid green;
}
.login input[class |= "username"]::placeholder{
 font-weight: 700;
 text-shadow: 1px 1px 8px green;
 font-style: italic;
 text-align: center;
}
.login input[class |= "password"]::placeholder{
 font-weight: 700;
 text-shadow: 1px 1px 8px blueviolet;
 font-style: italic;
 text-align: center;
}
.login .wrapper{
  text-align: center;
}

طراحی وب

علی قربان زاده

24 خرداد 99

Answer 1

حذف شده

میشه متن پلیس هولدر رو با همین روش جا به جا کرد؟

یعنی وقتی یه نفر روی اینپوت فوکوس میکنه، متنش مثل عنوان بره بالای اون اینپوت؟

توسط

محمد مهدی کاظمی

5 تیر 99

Answer 2

حذف شده

محمد مهدی جان سلام ببخشید برای من ایمیل نیومده بود بخاطر همین کامنتت رو ندیدم و دارم دیر پاسخ میدم شرمنده

سوالت برای خود من هم سوال شد و باعث شد که سرچ کنم

و چیزی ک من متوجه شدم اینه که همچین کاری رو با پلیس هولدر ها به صورت مستقیم نمیشه انجام داد اما راهای زیادی برای انجام دادنش هست من یه نمونش رو برات میذارم هرچند کمی برام گنگ بود کدش باید بیشتر تمرین کنم تا بفهمم همشونو

و یه لینک هم اخرش میذارم که نمونه ها و راه حل های دیگه ش رو هم ببینی

html

<label>
  <input placeholder=" ">
  <span>Placeholder Text</span>
</label>

css

label {
  margin:20px 0;
  position:relative;
  display:inline-block;
}
  
span {
  padding:10px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}

input {
  padding:10px;
}

input:focus + span, input:not(:placeholder-shown) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

راه حل های دیگه

امیدوارم تونسته باشم کمکت کرده باشم :)

توسط

علی قربان زاده

6 تیر 99

نحوه ی استایل دهی به placeholder ها

سوالات مرتبط