Placeholder: Position absolut funktioniert nicht mit negativen oberen Wert

Question

Ich habe eine Eingabe, und es hat einen Platzhalter. Ich habe den Platzhalter erfolgreich gestylt, aber wenn ich versuche, den Platzhalter nach oben zu bewegen, wenn die Eingabe seinen Fokus nicht erreicht hat, verwende ich die absolute Position und die obere Position mit einem negativen Wert.

Es ist mein Code aussieht:

<style> 
    #wrapper { 
     padding:40px; 
     position:relative; 
    } 

    input { 
     display:block; 
     position : relative; 
    } 

    input::-webkit-input-placeholder { 
     color: red; 
     position:absolute; 
    } 

    input:focus::-webkit-input-placeholder { 
     top:-20px; 
     color:blue; 
    } 
</style> 

<div id="wrapper"> 
    <input type="text" placeholder="Engkus Kusnadi"> 
</div> 

Hier ist meine Geige: https://jsfiddle.net/su2roqvc/2/

Was fehlt mir?

Answer 1

#wrapper { 
 
    padding:40px; 
 
    position:relative; 
 
} 
 

 
input { 
 
    position : relative; 
 
} 
 

 
input::-webkit-input-placeholder { 
 
    color: red; 
 
    position:absolute; 
 
    transition: all 0.3s; 
 
} 
 

 
    
 
input:focus::-webkit-input-placeholder { 
 
-ms-transform: translate(0, -20px); 
 
    \t -webkit-transform: translate(0, -20px); 
 
transform: translate(0, -20px); 
 
color:blue; 
 
} 
 
input:focus::-moz-placeholder { 
 
-webkit-transform: translate(0, -20px); 
 
transform: translate(0, -20px); 
 
color: green; 
 
}

<div id="wrapper"> 
 

 
    <input type="text" placeholder="Engkus Kusnadi"> 
 

 
</div>

Ich bin nicht 100% mit css3 noch, diese noch in Firefox nicht funktioniert aber in Chrome Ihr Platzhalter wird über dem Eingang auftauchen.

hmmm das Firefox-Äquivalent jetzt

* edit gefunden, eine alternative Lösung forschen, die für Sie arbeiten könnte, oder zu einer Lösung führen. Es funktioniert auf Chrome und Firefox! Viel Glück

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html { 
 
    font: 14px/1.4 Sans-Serif; 
 
} 
 

 
form { 
 
    width: 320px; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 
form > div { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
form input, form textarea { 
 
    width: 100%; 
 
    border: 2px solid gray; 
 
    background: none; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    padding: 8px 12px; 
 
    outline: 0; 
 
} 
 
form input:valid, form textarea:valid { 
 
    background: white; 
 
} 
 
form input:focus, form textarea:focus { 
 
    border-color: blue; 
 
} 
 
form input:focus + label, form textarea:focus + label { 
 
    background: blue; 
 
    color: white; 
 
    font-size: 70%; 
 
    padding: 1px 6px; 
 
    z-index: 2; 
 
    text-transform: uppercase; 
 
} 
 
form label { 
 
    transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s; 
 
    position: absolute; 
 
    color: #999; 
 
    padding: 7px 6px; 
 
} 
 
form textarea { 
 
    display: block; 
 
    resize: vertical; 
 
} 
 

 
form.go-up input, form.go-up textarea { 
 
    padding: 12px 12px 12px 12px; 
 
} 
 
form.go-up label { 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
form.go-up input:focus, form.go-up textarea:focus { 
 
    padding: 20px 6px 4px 6px; 
 
} 
 
form.go-up input:focus + label, form.go-up textarea:focus + label { 
 
    top: 0; 
 
    margin-top: 0px; 
 
}

<form class="go-up"> 
 
    <h2>To Top</h2> 
 
    <div> 
 
    <input id="name" name="name" type="text" required> 
 
    <label for="name">Your Name</label> 
 
    </div> 
 
    <div> 
 
    <input id="phone" name="phone" type="tel" required> 
 
    <label for="phone">Phone</label> 
 
    </div> 
 
    <div> 
 
    <textarea id="message" name="phone" required></textarea> 
 
    <label for="message">Email</label> 
 
    </div> 
 
</form>

Answer 2

Sie können nicht topbottomleftright in ::-webkit-input-placeholder verwenden. Sie können nur diesen Stil verwenden:

• Schrifteigenschaften
• Farbe
• Hintergrund Eigenschaften
• Wortabstand
• Zeichenabstand
• text-decoration -Vertikale ausrichten -Text -transformieren -line-height -text-indent -opazität

Sie können input:focus[placeholder] verwenden.

#wrapper { 
 
    padding:40px; 
 
    position:relative; 
 
} 
 

 
input { 
 
    position : relative; 
 
} 
 

 
input::-webkit-input-placeholder { 
 
    color: red; 
 
} 
 

 
input:focus[placeholder] { 
 
    top:-20px; 
 
    color:blue; 
 
}

<div id="wrapper"> 
 

 
    <input type="text" placeholder="Engkus Kusnadi"> 
 

 
</div>

Answer 3

Wie @ 3rdthemagic bereits gesagt, gibt es keine Unterstützung dafür. Ich würde vorschlagen, Sie versuchen, mit Label, span oder Pseudo-Elemente zu spielen. Tympanus hat einige großartige Beispiele.Viel Glück;)

Answer 4

Sie können line-height verwenden, um den Text nach oben zu bewegen, wird dieser Code al e Browser unterstützen

#wrapper { 
 
    padding:40px; 
 
    position:relative; 
 
} 
 

 
input { 
 
    position : relative; 
 
} 
 
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
 
    color: red; 
 
    position:absolute;} 
 
input::-moz-placeholder { /* Firefox 19+ */ 
 
    color: red; 
 
    position:absolute;} 
 
input:-ms-input-placeholder { /* IE 10+ */ 
 
    color: red; 
 
    position:absolute;} 
 
input:-moz-placeholder { /* Firefox 18- */ 
 
    color: red; 
 
    position:absolute; 
 
} 
 
input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
 
    line-height:1px; 
 
    color:blue; 
 
} 
 
input:focus::-moz-placeholder { /* Firefox 19+ */ 
 
    line-height: 1px; 
 
    color:blue; 
 
} 
 
input:focus:-ms-input-placeholder { /* IE 10+ */ 
 
    line-height:1px; 
 
    color:blue; 
 
} 
 
input:focus:-moz-placeholder { /* Firefox 18- */ 
 
    line-height:1px; 
 
    color:blue; 
 
    
 
}

<div id="wrapper"> 
 

 
    <input type="text" placeholder="Engkus Kusnadi"> 
 

 
</div>

Answer 5

Sie können labels und funktioniert in alle Browser!

---

Upgate

Added js für besseres Verhalten.

var fields = $('.js-field'); 
 

 
fields.each(function() { 
 
    var input = $(this).find('input'); 
 
    var placeholder = $(this).find('span'); 
 
    
 
    input.on('blur', function() { 
 
    $(this).val() == "" 
 
     ? placeholder.show() 
 
     : placeholder.hide(); 
 
    }); 
 
    
 
    input.on('focus', function() { 
 
    placeholder.show() 
 
    }); 
 
});

label { 
 
    display: block; 
 
    width: 200px; 
 
    position: relative; 
 
    padding-top: 20px; 
 
    margin-top: 20px; 
 
} 
 
input { 
 
    height: 30px; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    box-sizing: border-box;  
 
} 
 
span { 
 
    position: absolute; 
 
    display: block; 
 
    top: 20px; 
 
    left: 5px; 
 
    color: red; 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    line-height: 30px; 
 
    transition: .3s ease; 
 
} 
 
input:focus + span { 
 
    transform: translateY(-100%); 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="js-field"> 
 
    <input> 
 
    <span>Placeholder1</span> 
 
</label> 
 
<label class="js-field"> 
 
    <input> 
 
    <span>Placeholder2</span> 
 
</label>