我想定製輸入元素的邊框/輪廓，所以我把div元素作爲父元素。我希望在輸入元素聚焦時顯示邊框，但現在邊框的底部不顯示。我想它正在被某種東西割斷。border-bottom沒有顯示在輸入div包裝上

Here是小提琴例如

任何人都知道爲什麼嗎？

JS：

$('input').focus(
    function(){ 
     $('.input-container').addClass('is-focused'); 
}).blur(
    function(){ 
     $('.input-container').removeClass('is-focused'); 
});

CSS：

.search * { 
    height: 35px; 
} 

.is-focused{ 
    border-style: solid; 
    border-color: #986fa5; 
} 

input:focus{ 
    outline-width: 0px; 
} 

input{ 
    padding: 0; 
    border: 0; 
}

HTML：

<div class="search"> 
    <div class="input-container"> 
     <input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" /> 
    </div> 
</div>

來源

2016-10-19 user3494047

爲什麼不能自定義輸入邊界本身？ – Finrod

對我來說很好，你使用的是什麼瀏覽器+版本？（我在IE瀏覽器中測試） – Grey

@Finrod說，你可以簡單地使用* CSS *的*'：focus' *，並簡單地使用*'box-shodow' *或其他東西來輕鬆創建類似的效果。 – vivekkupadhyay

邊框需要的寬度爲好。

$('input').focus(
 
    function() { 
 
     $('.input-container').addClass('is-focused'); 
 
    }).blur(
 
    function() { 
 
     $('.input-container').removeClass('is-focused'); 
 
    });

.search * { 
 
    height: 35px; 
 
} 
 
.is-focused { 
 
    border-width: 0 0 1px 0; /* top right bottom left */ 
 
    border-style: solid; 
 
    border-color: #986fa5; 
 
} 
 
input:focus { 
 
    outline-width: 0px; 
 
} 
 
input { 
 
    padding: 0; 
 
    border: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="search"> 
 
    <div class="input-container"> 
 
    <input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" /> 
 
    </div> 
 
</div>

替代

作爲替代方案，你可以做到這一點沒有JS還有：

.search * { 
 
    height: 35px; 
 
} 
 

 
input:focus { 
 
    outline-width: 0px; 
 
    border-width: 0 0 1px 0; /* top right bottom left */ 
 
    border-style: solid; 
 
    border-color: #986fa5; 
 
} 
 
input { 
 
    padding: 0; 
 
    border: 0; 
 
    /* you might need to add this line to get the exact 
 
    same result as the answer above */ 
 
    width: 100%; 
 
}

<div class="search"> 
 
    
 
    <input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" /> 
 
    
 
</div>

來源

2016-10-19 12:07:54 LinkinTED

這在這個代碼片段中工作，但它不工作在我的小提琴[here]（http://jsfiddle.net/63t0oz75/） – user3494047

刪除'.search * { height：35px; }'解決了這個問題。所以我猜測輸入不知何故與其父母重疊。也許只能將高度設置爲'.search'或輸入。 – LinkinTED

http://jsfiddle.net/63t0oz75/1/ – LinkinTED

我不願意我們Ë的JavaScript這一點，只需使用:focus僞選擇樣式輸入：

CSS

.search * { 
     height: 35px; 

} 

input{ 
     padding: 0; 
     border: 0; 
} 

input:focus{ 
     outline-width: 0px; 
     border-style: solid; 
     border-color: #986fa5; 
     border-width: 1px; 
}

來源

2016-10-19 12:10:54

我希望在輸入和搜索按鈕周圍都有邊框，這就是爲什麼我不想使用您的解決方案 – user3494047

border-bottom沒有顯示在輸入div包裝上

回答

替代

相關問題