CSS:

/* SHIPPING FORM 
===============================================================================================
*/
::placeholder{
  font-weight: 600;
}


#shipping-form{
  margin-top: 120px;
  margin-left: 150px;
  max-width: 440px;
}

.input-element{
  background-color: #0C0C0D !important;
  height: 30px;
  width: 200px;
  margin-bottom: 20px;
  border: none;
  padding: 15px;
  z-index: 1;
}

.full-length{
  width: 440px !important;
}

.left{
  float: left;
}
.right{
  float: right;
}

#shipping-title{
  color: white;
  margin-bottom: 50px;
}

#shipping-title-wrapper{
  margin-left: 170px;
}

#shipping-icon{
  width: 15%;
  margin-left: 25px;
}

/* BILLING FORM 
===============================================================================================
*/

#billing-form{
  float: right;
  max-width: 440px;
  margin-right: 100px;
}

#billing-title{
  color: white;
  margin-bottom: 50px;
  margin-left: 15px;
}

#add-button{

  background-color: #4FEB75;
}

.billing-buttons{
  font-size: 14px;
  color: white;
  font-weight: 800;
  border: none;
  width: 136px;
  height: 30px; 
  margin-right: 15px;
  margin-top: 30px;
}

#delete-button{
  background-color: #F5576C;
}

HTML:

<div id="shipping-section"></div>
    <form id="shipping-form">
            <div id="shipping-title-wrapper">
                <img src="Profiles Icon.svg" id="shipping-icon"></img>
                    <h2 id="shipping-title">Shipping</h2>
                </div>
        <input class="input-element left" id="first-name" placeholder="First Name"></input>
        <input class="input-element right" id="last-name" placeholder="Last Name"></input>
        <input class="input-element left full-length" id="email-address" placeholder="Email Address"></input>
        <input class="input-element left full-length" id="adress-line-1" placeholder="Address Line 1"></input>
        <input class="input-element left full-length" id="address-line-2" placeholder="Address Line 2"></input>
        <input class="input-element left" id="house-name" placeholder="House Name/Num"></input>
        <input class="input-element right" id="country-name" placeholder="Country"></input>
        <input class="input-element left" id="city-name" placeholder="City/State"></input>
        <input class="input-element right" id="postcode-name" placeholder="Postcode/Zipcode"></input>

        <div>
                <button class="billing-buttons" id="add-button">Add</button>
                <button class="billing-buttons" id="delete-button">Delete</button>
            </div>

    </form>

</div>



<div id="billing-form">
        <form id="shipping-form">
                <div id="shipping-title-wrapper">
                    <img src="Billing Icon.svg" id="shipping-icon"></img>
                        <h2 id="billing-title">Billing</h2>
                    </div>
            <input class="input-element left" id="first-name" placeholder="First Name"></input>
            <input class="input-element right" id="last-name" placeholder="Last Name"></input>
            <input class="input-element left full-length" id="email-address" placeholder="Email Address"></input>
            <input class="input-element left full-length" id="adress-line-1" placeholder="Address Line 1"></input>
            <input class="input-element left full-length" id="address-line-2" placeholder="Address Line 2"></input>
            <input class="input-element left" id="house-name" placeholder="House Name/Num"></input>
            <input class="input-element right" id="country-name" placeholder="Country"></input>
            <input class="input-element left" id="city-name" placeholder="City/State"></input>
            <input class="input-element right" id="postcode-name" placeholder="Postcode/Zipcode"></input>
            <input class="input-element left full-length" id="card-name" placeholder="Card Name"></input>
            <input class="input-element left full-length" id="card-number" placeholder="Card Number"></input>
            <input class="input-element left" id="exp-date" placeholder="Exp Date (MM/YY)"></input>
            <input class="input-element right" id="exp-date" placeholder="CVV"></input>







        </form>
</div>

Das Problem, das ich habe, ist, dass keines der HTML-Elemente auf der Seite ordnungsgemäß funktioniert. Ich kann nicht auf die Eingabefelder und nicht auf die Schaltflächen klicken. Das Styling ist auch schief gelaufen, die beiden Formulare standen nebeneinander, bevor ich versuchte, einer separaten Seite ein neues Formular hinzuzufügen. Ich weiß, dass ich wahrscheinlich etwas Dummes getan habe, aber Stunden damit verbracht habe, es zu reparieren.

0
Tom Smith 18 Jän. 2019 im 17:52

3 Antworten

Beste Antwort
<div id="shipping-section"></div>

Da der Versandbereich hier geschlossen ist und in Ihrem Formular kein Breitenattribut angegeben ist, wird eine Breite von 100% angenommen. Versuchen Sie, Ihr Versandformular in den Versandcontainer zu wickeln.

Ihre Formulare schweben aufgrund ihrer Breite und Ränder nicht nebeneinander.

Und Ihre Textfarbe für die Eingabe ist schwarz, was bedeutet, dass sie vor dem Hintergrund des Eingabefelds nicht sichtbar ist. Versuchen Sie es in Weiß zu ändern

Siehe unten für Arbeitscode

<html>
<style>
/* SHIPPING FORM 
===============================================================================================
*/
::placeholder{
  font-weight: 600;
}

#shipping-section {
width: 40%;
float: left;
}
#shipping-form{
  margin-top: 120px;
  margin-left: 150px;
  max-width: 440px;
}

.input-element{
  background-color: #0C0C0D !important;
  height: 30px;
  width: 200px;
  margin-bottom: 20px;
  border: none;
  padding: 15px;
  z-index: 1;
  color: #fff;
}

.full-length{
  width: 440px !important;
}

.left{
  float: left;
}
.right{
  float: right;
}

#shipping-title{
  color: white;
  margin-bottom: 50px;
}

#shipping-title-wrapper{
  margin-left: 170px;
}

#shipping-icon{
  width: 15%;
  margin-left: 25px;
}

/* BILLING FORM 
===============================================================================================
*/

#billing-form{
  float: left;
  margin-right: 100px;
  width: 40%;
}

#billing-title{
  color: white;
  margin-bottom: 50px;
  margin-left: 15px;
}

#add-button{

  background-color: #4FEB75;
}

.billing-buttons{
  font-size: 14px;
  color: white;
  font-weight: 800;
  border: none;
  width: 136px;
  height: 30px; 
  margin-right: 15px;
  margin-top: 30px;
}

#delete-button{
  background-color: #F5576C;
}
</style>


<div id="shipping-section">
    <form id="shipping-form">
            <div id="shipping-title-wrapper">
                <img src="Profiles Icon.svg" id="shipping-icon"></img>
                    <h2 id="shipping-title">Shipping</h2>
                </div>
        <input class="input-element left" id="first-name" placeholder="First Name"></input>
        <input class="input-element right" id="last-name" placeholder="Last Name"></input>
        <input class="input-element left full-length" id="email-address" placeholder="Email Address"></input>
        <input class="input-element left full-length" id="adress-line-1" placeholder="Address Line 1"></input>
        <input class="input-element left full-length" id="address-line-2" placeholder="Address Line 2"></input>
        <input class="input-element left" id="house-name" placeholder="House Name/Num"></input>
        <input class="input-element right" id="country-name" placeholder="Country"></input>
        <input class="input-element left" id="city-name" placeholder="City/State"></input>
        <input class="input-element right" id="postcode-name" placeholder="Postcode/Zipcode"></input>

        <div>
                <button class="billing-buttons" id="add-button">Add</button>
                <button class="billing-buttons" id="delete-button">Delete</button>
            </div>

    </form>

</div>



<div id="billing-form">
        <form id="shipping-form">
                <div id="shipping-title-wrapper">
                    <img src="Billing Icon.svg" id="shipping-icon"></img>
                        <h2 id="billing-title">Billing</h2>
                    </div>
            <input class="input-element left" id="first-name" placeholder="First Name"></input>
            <input class="input-element right" id="last-name" placeholder="Last Name"></input>
            <input class="input-element left full-length" id="email-address" placeholder="Email Address"></input>
            <input class="input-element left full-length" id="adress-line-1" placeholder="Address Line 1"></input>
            <input class="input-element left full-length" id="address-line-2" placeholder="Address Line 2"></input>
            <input class="input-element left" id="house-name" placeholder="House Name/Num"></input>
            <input class="input-element right" id="country-name" placeholder="Country"></input>
            <input class="input-element left" id="city-name" placeholder="City/State"></input>
            <input class="input-element right" id="postcode-name" placeholder="Postcode/Zipcode"></input>
            <input class="input-element left full-length" id="card-name" placeholder="Card Name"></input>
            <input class="input-element left full-length" id="card-number" placeholder="Card Number"></input>
            <input class="input-element left" id="exp-date" placeholder="Exp Date (MM/YY)"></input>
            <input class="input-element right" id="exp-date" placeholder="CVV"></input>







        </form>
</div>
1
Dion 18 Jän. 2019 im 15:05

Ist es möglich, dass Sie verwirrt sind, wenn Sie nicht anklickbar sind und die eingegebenen Daten nicht sehen können?

Ihr Hintergrund Ihrer Eingabefelder ist sehr dunkel

Ändern Sie Ihre Eingabeelementklasse in

   .input-element{
      background-color: #0C0C0D !important;
      height: 30px;
      width: 200px;
      margin-bottom: 20px;
      border: none;
      padding: 15px;
      z-index: 1;
      color: white;
    }

Ich habe Farbe hinzugefügt: Weiß am Boden

0
Jordan Robinson 18 Jän. 2019 im 15:01

Ich habe Ihren Code in eine jsfiddle eingefügt http://jsfiddle.net/taz8vhoc/

Sobald Sie hinzufügen

color: white;

Es funktioniert gut

0
Arges86 18 Jän. 2019 im 15:06