blocks|key|1542858|text|关于在基于webkit的浏览器中调整文本区域的大小：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1542859|在文本区域上设置max-height和max-width不会删除可视的大小调整手柄。尝试：|1542860|resize:+none;|code-block|syntax|javascript|1542861|(是的，我同意“尽量避免做任何违背用户期望的事情”，但有时它确实有意义，即在web应用程序的上下文中)|1542862|要从头开始自定义webkit表单元素的外观：|1542863|-webkit-appearance:+none;|1542864|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

On textarea resizing in webkit based browsers: 

Setting max-height and max-width on the textarea will not remove the visual resize handle. Try: 

<pre><code>resize: none;
</code></pre>

(and yes I agree with "try to avoid doing anything which breaks the user's expectation", but sometimes it does make sense, i.e. in the context of a web application)

To customize the look and feel of webkit form elements from scratch:

<pre><code>-webkit-appearance: none;
</code></pre>

blocks|key|1542866|text|<select+class="custom-select">
++++++++<option>option1</option>
++++++++<option>option2</option>
++++++++<option>option3</option>
++++++++<option>option4</option>
</select>

<style>
.custom-select+{
++++++++display:+inline-block;
++++++++border:+2px+solid+#bbb;
++++++++padding:+4px+3px+3px+5px;
++++++++margin:+0;
++++++++font:+inherit;
++++++++outline:none;+/*+remove+focus+ring+from+Webkit+*/
++++++++line-height:+1.2;
++++++++background:+#f8f8f8;

++++++++-webkit-appearance:none;+/*+remove+the+strong+OSX+influence+from+Webkit+*/

++++++++-webkit-border-radius:+6px;
++++++++-moz-border-radius:+6px;
++++++++border-radius:+6px;
++++}
++++/*+for+Webkit's+CSS-only+solution+*/
++++@media+screen+and+(-webkit-min-device-pixel-ratio:0)+{+
++++++++.custom-select+{
++++++++++++padding-right:30px;++++
++++++++}
++++}

++++/*+Since+we+removed+the+default+focus+styles,+we+have+to+add+our+own+*/
++++.custom-select:focus+{
++++++++-webkit-box-shadow:+0+0+3px+1px+#c00;
++++++++-moz-box-shadow:+0+0+3px+1px+#c00;
++++++++box-shadow:+0+0+3px+1px+#c00;
++++}

++++/*+Select+arrow+styling+*/
++++.custom-select:after+{
++++++++content:+"▼";
++++++++position:+absolute;
++++++++top:+0;
++++++++right:+0;
++++++++bottom:+0;
++++++++font-size:+60%25;
++++++++line-height:+30px;
++++++++padding:+0+7px;
++++++++background:+#bbb;
++++++++color:+white;

++++++++pointer-events:none;

++++++++-webkit-border-radius:+0+6px+6px+0;
++++++++-moz-border-radius:+0+6px+6px+0;
++++++++border-radius:+0+6px+6px+0;
++++}
</style>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1542867|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;select class="custom-select"&gt;
 &lt;option&gt;option1&lt;/option&gt;
 &lt;option&gt;option2&lt;/option&gt;
 &lt;option&gt;option3&lt;/option&gt;
 &lt;option&gt;option4&lt;/option&gt;
&lt;/select&gt;

&lt;style&gt;
.custom-select {
 display: inline-block;
 border: 2px solid #bbb;
 padding: 4px 3px 3px 5px;
 margin: 0;
 font: inherit;
 outline:none; /* remove focus ring from Webkit */
 line-height: 1.2;
 background: #f8f8f8;

 -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
 }
 /* for Webkit's CSS-only solution */
 @media screen and (-webkit-min-device-pixel-ratio:0) { 
 .custom-select {
 padding-right:30px; 
 }
 }

 /* Since we removed the default focus styles, we have to add our own */
 .custom-select:focus {
 -webkit-box-shadow: 0 0 3px 1px #c00;
 -moz-box-shadow: 0 0 3px 1px #c00;
 box-shadow: 0 0 3px 1px #c00;
 }

 /* Select arrow styling */
 .custom-select:after {
 content: "▼";
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 font-size: 60%;
 line-height: 30px;
 padding: 0 7px;
 background: #bbb;
 color: white;

 pointer-events:none;

 -webkit-border-radius: 0 6px 6px 0;
 -moz-border-radius: 0 6px 6px 0;
 border-radius: 0 6px 6px 0;
 }
&lt;/style&gt;
</code></pre>

blocks|key|1327624|text|我发现删除“滑动门”类型输入按钮上的轮廓很有帮助，因为轮廓没有覆盖滑动门图像的右侧“帽”，这使得焦点状态看起来有点不稳定。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1327625|input.slidingdoorbutton:focus+{+outline:+none;}|code-block|syntax|javascript|1327626|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I found it helpful to remove the outline on a "sliding door" type of input button, because the outline doesn't cover the right "cap" of the sliding door image making the focus state look a little wonky. 

<pre><code>input.slidingdoorbutton:focus { outline: none;}
</code></pre>

blocks|key|1327647|text|如果你想移除Bootstrap中按钮的发光效果(在我看来，这不一定是糟糕的UX+)，你需要以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1327648|.btn:focus,+.btn:active:focus,+.btn.active:focus{
++outline-color:+transparent;
++outline-style:+none;
}|code-block|syntax|javascript|1327649|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you want to remove the glow from buttons in Bootstrap (which is not necessarily bad UX in my opinion), you'll need the following code:

<pre><code>.btn:focus, .btn:active:focus, .btn.active:focus{
 outline-color: transparent;
 outline-style: none;
}
</code></pre>

blocks|key|1542920|text|有时它会发生，然后使用下面的按钮删除外边线|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1542921|input:hover
input:active,+
input:focus,+
textarea:active,
textarea:hover,
textarea:focus,+
button:focus,
button:active,
button:hover
{
++++outline:0px+!important;
}|code-block|syntax|javascript|1542922|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

some times it's happens buttons also then use below to remove the outerline

<pre><code>input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
 outline:0px !important;
}
</code></pre>

blocks|key|1542941|text|我只需要从我的文本输入字段中删除这个效果，我不能让其他技术很好地工作，但这是对我有效的；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1542942|input[type="text"],+input[type="text"]:focus{
++++++++++++outline:+0;
++++++++++++border:none;
++++++++++++box-shadow:none;

++++}|code-block|syntax|javascript|1542943|在Firefox和Chrome中测试过。|1542944|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I just needed to remove this effect from my text input fields, and I couldn't get the other techniques to work quite right, but this is what works for me;

<pre><code>input[type="text"], input[type="text"]:focus{
 outline: 0;
 border:none;
 box-shadow:none;

 }
</code></pre>

Tested in Firefox and in Chrome.

blocks|key|1542955|text|好的!您还可以使用*从所有HTML元素中删除蓝色边框|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1542956|*{
++++outline-color:+transparent;
++++outline-style:+none;
++}|code-block|syntax|javascript|1542957|和|1542958|+*{
+++++outline:+none;+++
+++}|1542959|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Sure! You can remove blue border also from all HTML elements using *

<pre><code>*{
 outline-color: transparent;
 outline-style: none;
 }
</code></pre>

And

<pre><code> *{
 outline: none; 
 }
</code></pre>

blocks|key|1327704|text|这个解决方案对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1327705|input:focus+{
++++outline:+none+!important;
++++box-shadow:+none+!important;
}|code-block|syntax|javascript|1327706|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This solution worked for me.

<pre><code>input:focus {
 outline: none !important;
 box-shadow: none !important;
}
</code></pre>

I am wondering if its possible to remove the default blue and yellow glow when I click on a text input / text area using CSS?

Remove Safari/Chrome textinput/textarea glow

我想知道当我使用CSS点击文本输入/文本区域时，是否有可能删除默认的蓝色和黄色发光？

问删除Safari/Chrome文本输入/textarea发光
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除Safari/Chrome文本输入/textarea发光EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除Safari/Chrome文本输入/textarea发光
EN