2013-04-28 82 views
0

我想刪除默認圍繞輸入字段(垂直對齊),我曾嘗試使用:CSS刪除輸入文字居中

input[type="text} { 
    vertical-align: top; 
} 

基本上,我建立一個「文本框」組成,其中有的佔位符(後來圖標等)來看看下面的代碼:

定製CSS:

<div class="textbox"> 
    <div class="textbox-placeholder">Username or email</div> 
    <input type="text" class="textbox-input" /> 
</div> 

HTML:

body { 
    font: 400 16px/24px 'Lucida Grande', sans-serif; 
} 

.textbox { 
    height: 50px; 
    position: relative; 
    background-color: #E1E1E1; 
    border: 1px solid #CCCCCC; 
} 

.textbox-input { 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

input[type="text"] { 
    margin: 0; 
    padding: 0; 
    outline: 0; 
    border: 0; 
    background: none transparent; 
    font: inherit; 
} 

.textbox-input { 
    z-index: 20; 
} 

.textbox-input { 
    z-index: 10; 
} 

jsFiddle

+0

你的意思是像[this](http://jsfiddle.net/DTgty/1/)? – Vucko 2013-04-28 22:34:24

+0

@PSCoder我不知道這是他想要的:) – Vucko 2013-04-28 22:36:45

+0

@Vucko當你有我的jsFiddle,並開始在輸入字段中輸入時,你可以看到文本在中間垂直對齊,我想刪除這個,但不知道如何 – onlineracoon 2013-04-28 22:42:52

回答

2

垂直對齊文本輸入元素無法正常工作,它會永遠垂直居中,所以你需要做的是沒有設置規定的高度上什麼。在這種情況下,您通過設置明確的頂部和底部來完成此操作,因此請刪除第17行或將底部設置爲auto而不是0

.textbox-input { 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    /*bottom: 0;*/ 
    left: 0; 
} 

請參閱更新的JS小提琴:http://jsfiddle.net/DTgty/2/

請記住,placeholder屬性在大多數瀏覽器現在普遍,這樣可能想給自己節省一些時間,並用它來代替(就像我在這裏用它:http://jsfiddle.net/DTgty/3/