در مورد اینپوت ها

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام خسته نباشید . من زمانی که اینپوت را روی حالت auto complete قرار میدهم و پیشنهاد هم برای من آورده میشه و روی پیشنهاد که میزنم بک گراند اینپوت تغییر میکنه در حالی که بک گراند اصلی ترنسپرنت هست و میخوام زمانی که پیشنهاد هم به من داده شد و انتخابش کردم باز هم ترنسپرنت بمونه چه کار کنم ؟؟

درود

یعنی میخواید اون مستطیل درون فرم آبی ترنسپرنت باشه درسته؟

نازنین کریمی مقدم ۱۴ مرداد ۱۴۰۲، ۱۴:۱۰

بله میخوام بدون بک گراند باشه زمانی که پیشنهاد رو انتخاب میکنم ...

علی نبی زاده ۱۵ مرداد ۱۴۰۲، ۱۳:۰۵

متوجه شدم.

بی زحمت پروژه رو زیپ کنید و بفرستید تا روی کدتون تغییرات رو اعمال کنم و توضیح بدم.

نازنین کریمی مقدم ۱۵ مرداد ۱۴۰۲، ۱۹:۱۶

سلام نمیدونم چرا فایل زیپ رو نمیفرسته ؟؟

علی نبی زاده ۱۵ مرداد ۱۴۰۲، ۲۰:۰۵

خیلی منتظر بودم اما ارسالش نکرد . در قالب کد میفرستم

html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="assets/css/style.css" />
    <link rel="stylesheet" href="assets/css/grid-system.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css"
    />
    <link
      rel="stylesheet"
      href="https://static.fontawesome.com/css/fontawesome-app.css"
    />
    <link rel="icon" href="/v2/favicon.ico" />
   
    <link href="
        https://cdn.jsdelivr.net/npm/sweetalert2@11.7.20/dist/sweetalert2.min.css
    " rel="stylesheet">
    <title>New Projecttitle>
<style>
@font-face {
  font-family: font1;
  src: url("../fonts/IRSans.eot") format("eot");
  src: url("../fonts/IRSans.ttf") format("ttf");
  src: url("../fonts/IRSans.woff") format("woff");
  src: url("../fonts/IRSans.woff2") format("woff2");
}
@font-face {
  font-family: font2;
  src: url("../fonts/Agdasima-Regular.ttf");
}
@font-face {
  font-family: font-3;
  src: url("../fonts/fa-Iran-sans-web-bold.woff2") format("woff2");
}
@font-face {
  font-family: font-4;
  src: url("../fonts/fa-Iran-sans-web-light.woff2") format("woff2");
}
@font-face {
  font-family: lalezar;
  src: url("../fonts/Lalezar-Regular.woff") format("woff");
}
* {
  margin: 0;
  padding: 0;
  font-family: font-4;
}
ul,
li,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  zoom: 100%;
  background-color: #090917ed;
}
::-webkit-scrollbar {
  width: 0.871vw;
  background-color: #343434;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb {
  background-color: #c4c4c4;
  margin: 5px;
  transition: background-color 0.5s;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #989899;
  
}
::-webkit-scrollbar-track {
  background-color: #ffffff;
  
}
.container {
  max-width: 1580px;
  margin: auto;
}
.mt-500 {
  margin-top: 500px;
}
.img-responsive {
  width: 100%;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.mt-100 {
  margin-top: 100px;
}
.red{
  background-color: red;
}
.blue{
  background-color: blue;
}
::selection{
  color: orange;
}
.main-form-2{
    padding: 4px;
    background-color: #fff;
    max-width: 768px;
    margin: 95px auto;
    border-radius: 7px;
    z-index: 1000;
    
}
.form-wrapper{
    background-color: #ffffff;
    min-height: 390px;
    border-radius: 7px;
    box-shadow: 0 2px 7px rgb(113, 113, 113)ef;
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 5px;
    direction: rtl;
    font-family: lalezar;
   
}
.form-wrapper .right-section{
    flex-basis: 50%;
    width: 50%;
    background: linear-gradient(to right,rgb(124, 8, 233),rgb(233, 6, 142));
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    transition:all 0.6s ease;
}
.form-wrapper .left-section{
    flex-basis: 50%;
    width: 50%;
    background-color: #162839;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.6s ease-in-out;
}
.form-wrapper .left-section .section-form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
}
.form-wrapper .left-section .section-form form{
    direction: rtl;
    width: 100%;
}
.form-wrapper .left-section .input-group{
    position: relative;
    margin-top: 35px;
}
.form-wrapper .left-section .section-form input{
    background-color: transparent;
    border-width: 0 0 1px 0;
    border-color: #ffffff;
    width: 100%;
    outline: none;
    padding: 2px 6px;
    transition: 0.313s ease;
    font-family: lalezar;
    color: white;
}
.form-wrapper .left-section .section-form label{
    position: absolute;
    bottom: 9px;
    right: 0;
    transition: 0.313s;
    font-family: lalezar;
    color: rgb(248, 248, 248);
    cursor: pointer;
}
.form-wrapper .left-section .section-form input:placeholder-shown ~ label{
    bottom: 9px;
    right: 0;
}
.form-wrapper .left-section .section-form input:focus ~ label,
.form-wrapper .left-section .section-form input ~ label{
    bottom: 30px;
    right: 0;
}
.form-wrapper .left-section .section-form input:focus ~ label{
    transform: scale(0.8);
}
.form-wrapper .left-section .section-form input:focus{
    border-color: #04bab7;
}
.form-wrapper .left-section .section-form button{
    border: none;
    color: white;
    background-color: #064f8a;
    padding: 5px 15px;
    font-family: lalezar;
    border-radius: 4px;
    margin-top: 30px;
    float: left;
    cursor: pointer;
    transition: 0.313s ease;
}
.form-wrapper .left-section .section-form button:hover{
    background-color: #0765b2;
    transform: scale(1.05);
}
.form-wrapper .left-section .signup-form{
    display: none;
}
.form-wrapper .right-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.6s ease-in-out;
}
.form-wrapper .right-section .login{
    font-family: lalezar;
    color: white;
    transition: 0.313s;
}
.form-wrapper .right-section .login{
    display: none;
    opacity: 0;
}
.form-wrapper .right-section .login div{
    text-align: center;
    margin-top: 25px;
}
.form-wrapper .right-section .signup{
    font-family: lalezar;
    color: white;
}
.form-wrapper .right-section .signup div{
    text-align: center;
    margin-top: 25px;
}
.form-wrapper .right-section span{
    margin-top: 120px;
    background-color: transparent;
    padding: 5px 15px;
    font-family: lalezar;
    border: 1px solid #fff;
    border-radius: 3px;
    cursor: pointer;
    transition:0.313s ease;
}
.form-wrapper .right-section span:hover{
    background-color: #fff3;
}
.signup-active .right-section{
    transform: translateX(-100%);
    background-image: linear-gradient(to right,rgb(8, 72, 233),rgb(6, 207, 233));
}
.signup-active .right-section .login{
    display: block;
    opacity: 1;
}
.signup-active .right-section .signup{
    display: none;
}
.signup-active .left-section{
    transform: translateX(100%);
}
.signup-active .left-section .signup-form{
    display: block;
}
.signup-active .left-section .login-form{
    display: none;
}
style>
  head>
  <body>
      
      <div class="main-form-2">
        <div class="form-wrapper">
          <div class="right-section">
            <div class="login">
              حساب کاربری داری ؟ از این قسمت وارد شو ... !
              <br>
              <div><span class="btn-login">ورودspan>div>
            div>
            <div class="signup">
              برای دسترسی به امکانات سایت ابتدا ثبت نام کنید ... !
              <br>
              <div><span class="btn-signup">عضویتspan>div>
            div>
          div>
          <div class="left-section">
            <div class="section-form login-form">
              <form action="">
                <div class="input-group">
                  <input type="text" id="inp-a-1" placeholder=" ">
                <label for="inp-a-1">نام کاربریlabel>
                div>
                <div class="input-group">
                  <input type="password" id="inp-a-2" placeholder=" ">
                <label for="inp-a-2">رمز عبورlabel>
                div>
                <button type="submit">ورودbutton>
              form>
            div>
            <div class="section-form signup-form">
              <form action="">
                <div class="input-group">
                  <input type="text" id="inp-b-1" placeholder=" ">
                <label for="inp-b-1">نام کاربریlabel>
                div>
                <div class="input-group">
                  <input type="email" id="inp-b-2" placeholder=" ">
                <label for="inp-b-2">ایمیلlabel>
                div>
                <div class="input-group">
                  <input type="password" id="inp-b-3" placeholder=" ">
                <label for="inp-b-3">رمز عبورlabel>
                div>
                <div class="input-group">
                  <input type="password" id="inp-b-4" placeholder=" ">
                <label for="inp-b-4">تکرار رمز عبورlabel>
                div>
                <button type="submit">ثبت نامbutton>
              form>
            div>
          div>
        div>
      div>
  
    <script
      src="https://code.jquery.com/jquery-3.7.0.min.js"
      integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
      crossorigin="anonymous"
    >script>
    <script
      src="https://kit.fontawesome.com/79a164c540.js"
      crossorigin="anonymous"
    >script>
    <script src="
    https://cdn.jsdelivr.net/npm/sweetalert2@11.7.20/dist/sweetalert2.all.min.js
    ">script>
<script>
$('.btn-signup').click(function(){
    $('.form-wrapper').addClass('signup-active');
});
$('.btn-login').click(function(){
    $('.form-wrapper').removeClass('signup-active');
});
script>
    <script src="assets/js/main.js">script>
    
  body>
html>

علی نبی زاده ۱۵ مرداد ۱۴۰۲، ۲۰:۰۶

سایت از جهت ارسال پیام خیلی مشکل داره ... کاش روی این قضیه یه فکری بشه ... پیام قبلی هم فکر کنم کدش اشتباه بوده ... !

علی نبی زاده ۱۵ مرداد ۱۴۰۲، ۲۰:۱۸

ببینید کلا بهتره از codepen.io استفاده کنید. لاگین کنید و یک پن جدید بسازید، کدهاتون رو اونجا پیست کنید و لینک رو بفرستید تا بررسی کنیم.

چندتا تاپیک باز کنید متوجه میشید دوستان چ میکنند.

نازنین کریمی مقدم ۱۶ مرداد ۱۴۰۲، ۰۶:۳۶