文字框尺寸縮小/縮小焦點

對focus尺寸textbox似乎縮小/縮小。但是，如果border-width設置爲2px，則無法觀察到這種降低。我想將border-width設置爲1px，但沒有像效果那樣的減少。如何做呢？文字框尺寸縮小/縮小焦點

#name:focus{ 
 
\t outline:none; 
 
\t border:1px solid rgba(81, 203, 238, 1); 
 
\t box-shadow:0 0 5px rgba(81, 203, 238, 1); 
 
} 
 

 
#name2:focus{ 
 
\t outline:none; 
 
\t border:2px solid rgba(81, 203, 238, 1); 
 
\t box-shadow:0 0 5px rgba(81, 203, 238, 1); 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    Border-width changes to 1px on focus<br> 
 
    <input type="text" id='name'><p> 
 
    Border-width changes to 2px on focus<br> 
 
    <input type="text" id='name2'><p> 
 
    Default textbox no effects added<br> 
 
    <input type="text" id='check'> 
 
</body> 
 
</html>

來源

2016-06-29 007mrviper

試試這個

#name:focus{ 
 
\t outline:none; 
 
\t border-color:rgba(81, 203, 238, 1); 
 
     border-style: ridge; 
 
\t box-shadow:0 0 5px rgba(81, 203, 238, 1); 
 
} 
 

 
#name2:focus{ 
 
\t outline:none; 
 
\t border-color:rgba(81, 203, 238, 1); 
 
     border-style: ridge; 
 
\t box-shadow:0 0 5px rgba(81, 203, 238, 1); 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    Border-width changes to 1px on focus<br> 
 
    <input type="text" id='name'><p> 
 
    Border-width changes to 2px on focus<br> 
 
    <input type="text" id='name2'><p> 
 
    Default textbox no effects added<br> 
 
    <input type="text" id='check'> 
 
</body> 
 
</html>

來源

2016-06-29 11:54:23

您在這裏有多種方法。例如，您可以將默認邊框寬度設置爲1px（#name2）或增加焦點上的填充（#name）。

#name2 { 
 
    border:1px solid rgba(81, 203, 238, 1); 
 
} 
 
#name2:focus, 
 
#name:focus{ 
 
    outline:none; 
 
    border:1px solid rgba(81, 203, 238, 1); 
 
    box-shadow:0 0 5px rgba(81, 203, 238, 1); 
 
} 
 
#name:focus{ 
 
    padding: 2px; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    Padding changes to 2px on focus<br> 
 
    Padding <input type="text" id='name'><br> 
 
    Border default is set to 1px<br> 
 

 
    Border <input type="text" id='name2'><br> 
 
    Check <input type="text" id='check'> 
 
</body> 
 
</html>

來源

2016-06-29 12:00:19

包括填充解決了這個問題。感謝你的付出！ – 007mrviper

這種問題可以通過在boxes其中上focus以往效果必須加入引入padding來解決。
我在默認設置上添加了padding:2px。 Padding:2px也可以在focus上添加，但是您的問題可以通過僅添加默認設置來解決。看看snippet。

#name:focus{ 
 
\t outline:none; 
 
\t border:1px solid rgba(81, 203, 238, 1); 
 
\t box-shadow:0 0 5px rgba(81, 203, 238, 1); 
 
    padding: 2px; 
 
} 
 

 
#name2:focus{ 
 
\t outline:none; 
 
\t border:2px solid rgba(81, 203, 238, 1); 
 
\t box-shadow:0 0 5px rgba(81, 203, 238, 1); 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    Border-width changes to 1px on focus<br> 
 
    <input type="text" id='name'><p> 
 
    Border-width changes to 2px on focus<br> 
 
    <input type="text" id='name2'><p> 
 
    Default textbox no effects added<br> 
 
    <input type="text" id='check'> 
 
</body> 
 
</html>

來源

2016-06-30 05:03:05 user6485550

文字框尺寸縮小/縮小焦點

回答

相關問題