Grenzen nicht in CSS

Question

So habe ich ein Problem mit der unteren Grenze nicht auf meine Elemente angezeigt. Wenn ich das Element überprüfe, wird es von nichts überschrieben und es wird auch kein Fehler angezeigt.

Ich schrieb dies schlecht. Also ich brauche nur die untere Grenze, andere sollten nicht gesehen werden.

#top .input-text, 
 
\t \t #top input[type="text"], 
 
\t \t #top input[type="email"], 
 
\t \t #top input[type="tel"], 
 
\t \t #top textarea, 
 
\t \t #top select { 
 
\t \t background: #fff; 
 
\t \t font: 1em 'rajdhani', sans-serif; 
 
\t \t border-style: solid; 
 
\t \t border: 0; 
 
\t \t border-bottom: 1px; 
 
\t \t margin-bottom: 0px; 
 
\t \t }

<input type="email"><br> 
 
    <p>Something</p> 
 
    <input type="text"><br> 
 
    <p>Something2</p> 
 
    <input type="tel"><br>

Was auf der Website tho passiert, ist, dass alle Grenzen versteckt sind. Ich muss den Rand setzen: 0; zuerst den Standardrahmen zu überschreiben.

Answer 1

Bitte entfernen Sie die border: 0 CSS-Regel

Answer 2

Versuchen:

border-bottom:1px solid #000; 

Answer 3

.input-text { 
 
    background: #fff; 
 
    font: 1em 'rajdhani', sans-serif; 
 
    border-style: solid; 
 
    border: 0; 
 
    border-bottom:1px solid #000; 
 
    margin-bottom: 0px; 
 
}

<input type="email" class="input-text"><br> 
 
<p>Something</p> 
 
<input type="text" class="input-text"><br> 
 
<p>Something2</p> 
 
<input type="tel" class="input-text"><br>

Verwenden border-bottom:1px solid #000; statt border-bottom: 1px;

Answer 4

eine containe hinzufügen r div und geben Sie die ID 'top'. jsfiddle

<div id="top"> 
    <input type="email"> 
    <br> 
    <p>Something</p> 
    <input type="text"> 
    <br> 
    <p>Something2</p> 
    <input type="tel"> 
    <br> 
</div>