Linie Textbox HTML

Ich möchte ein Textfeld wie folgt erstellen:Linie Textbox HTML

enter image description here

Es ist nur eine Linie, wo können Sie Text. Ist es möglich, dies mit CSS zu tun? oder auf Bootstrap?

2013-11-15 user2785929

Warum stimmen Leute solche Fragen ab? Er/sie ist wahrscheinlich neu in HTML/CSS und weiß es nicht. Sicher kann er/sie dies googeln, aber vielleicht weiß er/sie nicht, was er zu Google machen soll. –

Sie hatten Recht .. – Vainglory07

Ya, ist es möglich DEMO HERE

HTML

<input type="text" class="text-line" />

CSS

body { 
    background: #333333; 
} 
.text-line { 
    background-color: transparent; 
    color: #eeeeee; 
    outline: none; 
    outline-style: none; 
    border-top: none; 
    border-left: none; 
    border-right: none; 
    border-bottom: solid #eeeeee 1px; 
    padding: 3px 10px; 
}

Quelle

2013-11-15 03:24:53 Vainglory07

Ja, es ist möglich

HTML

<input type="text"/>

CSS

input[type="text"] { 

     border:none; /* Get rid of the browser's styling */ 
     border-bottom:1px solid black; /* Add your own border */ 

    }

Fiddle

Quelle

2013-11-15 03:19:17

Ich glaube, Sie Textfeld erstellen kann dann zu einem Bild den Hintergrund propety gesetzt, hat eine horizontale Linie.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.body1 
{ 
background-image:url('gradient2.png'); 

    background-repeat:repeat-y; 
    padding-left:20px; 
} 
</style> 
</head> 

<body> 

<input type="text" class="body1" /> 
</body> 

</html>

Quelle

2013-11-15 03:21:32 newday

Sie können es tun, ohne Bilder und Unterstreichungen auf die Breite begrenzt der Inpu t, aber es erfordert eine Reihe von CSS-Eigenschaften. Siehe dazu: http://jsfiddle.net/2jJvF/

Die CSS-I verwendet wurde, war dies:

* { 
    background-color: black; 
} 
input[type=text] { 
    color: white; 
    border: none; 
} 
input[type=text]:focus { 
    outline: none; 
} 
.text-container { 
    border: 0px 1px 0px 0px; 
    border-bottom: white solid; 
}

Quelle

2013-11-15 03:25:22

.text-input { 
border-bottom: solid 1px black; 
border-top: none; 
border-left: none; 
border-right: none;  
} 
input[type="text"]:focus{ 

outline: none; 

}

überprüfen meine jsfiddle
http://jsfiddle.net/inked/kCXh5/

Quelle

2013-11-15 04:08:07 Ink

ich individuell habe versucht, die 1. und 3. Methoden, aber hat nicht funktioniert. Als ich sie zusammen ausprobierte, funktionierte es für mich. Dies ist natürlich eine Kopie von oben, aber so sieht es aus.

input[type="text"] { 

     border:none; /* Get rid of the browser's styling */ 
     border-bottom:1px solid black; /* Add your own border */ 

    } 

.text-line { 
    background-color: transparent; 
    color: #eeeeee; 
    outline: none; 
    outline-style: none; 
    border-top: none; 
    border-left: none; 
    border-right: none; 
    border-bottom: solid #eeeeee 1px; 
    padding: 3px 10px; 
} 
</style> 
</head> 
<body> 
<h2>Card</h2> 
<div class="card"> 
    <div class="container"> 
    <h4><b>Question</b></h4> 
    <input type="text" class="text-line"/> 
    <p>Architect & Engineer</p> 
    </div> 
</div> 
</body>

Quelle

2018-02-10 16:56:41 vagdevi

Linie Textbox HTML

Antwort

Verwandte Themen