Chrome中輸入框預設樣式移除

2022-02-16 03:57:14 字數 473 閱讀 5104

在chrome瀏覽器中會預設給頁面上的輸入框如input、textarea等渲染瀏覽器自帶的邊框效果

ie8中效果如下:

chrome中效果如下:

這在我們未給輸入框設定獲取焦點時改變邊框顏色時,chrome瀏覽器解析頁面中預設將輸入框獲取焦點時改變邊框效果,這給我們帶來了極大的方便。如果我們要自己設定邊框色時,chrome瀏覽器的預設操作就給我們的設定(boder:1px solid color)帶來了問題,這是你會發現,你的設定在其他瀏覽器中時有效的,但在chrome中卻是無效的。

為解決這問題我們只需加上如下css,便可解決問題:

*:focus
若想給某個輸入框增加樣式,也可這樣操作:

#inputbt:focus
效果入下:

這樣設定時會發現,在橘色邊框旁還有乙個細細的邊框色,將css樣式改為,即可完美解決:

#inputbt:focus

樣式 輸入框 輸入框和表單設計

輸入框允許使用者在 ui 中輸入文字。它們通常出現在表單和對話方塊中。輸入框元件設計應該為互動提供清晰的啟示,使輸入框在布局中易於發現 高效地填充和可訪問。以下是輸入框的基本元素 容器 可互動輸入區 輸入文字 輸入文字字段 標題 告訴使用者這個輸入框該輸入什麼內容 佔位符文字 為使用者提供輸入文字前...

輸入框placeholder文字修改預設顏色

html5 為input 新增了原生的佔位符屬性 placeholder 高階瀏覽器都支援這個屬性,例如 修改輸入框placeholder文字預設顏色 value 預設的placeholder字型顏色是呈淺灰色,如果想改變這個預設顏色,解決方案如下 input moz placeholder,tex...

輸入框預設字的設定

很多地方都會用到輸入框,比如修改名字 製作輸入框的一般結構使這樣 bg上面掛乙個uisprite,作為輸入框的背景 input上面掛uiinput和boxcollider,用於輸入 label上掛uilabel,用於顯示輸入框中預設的字 執行時,label下會有游標的gameobject 輸入框在沒...