PC端的部分适配
This commit is contained in:
33
src/utils/inputStyles.ts
Normal file
33
src/utils/inputStyles.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* 输入框辅助样式
|
||||
* 用于处理React Native Web在浏览器中的默认focus outline样式
|
||||
*/
|
||||
|
||||
/**
|
||||
* 移除浏览器默认focus outline的样式
|
||||
* 这个样式可以覆盖浏览器原生的黑框/蓝框
|
||||
*/
|
||||
export const noFocusOutline = {
|
||||
// 移除浏览器默认的outline(针对Web)
|
||||
outlineWidth: 0,
|
||||
outline: 'none' as const,
|
||||
outlineColor: 'transparent',
|
||||
// 兼容React Native Web
|
||||
':focus': {
|
||||
outlineWidth: 0,
|
||||
outline: 'none',
|
||||
},
|
||||
// Webkit浏览器兼容
|
||||
'::placeholder': {
|
||||
outlineWidth: 0,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 为TextInput添加无outline样式
|
||||
*/
|
||||
export const inputNoFocusOutline = {
|
||||
...noFocusOutline,
|
||||
// 确保placeholder也没有outline
|
||||
placeholderTextColor: undefined, // 会在使用时覆盖
|
||||
};
|
||||
Reference in New Issue
Block a user