fix: Select arrow disappearing when hovering it (#50382)

components/pagination/style/index.ts

@@ -329,7 +329,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
 };
 
 const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
-  const { componentCls, antCls } = token;
+  const { componentCls } = token;
 
   return {
     [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
@@ -461,11 +461,6 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
       '&-size-changer': {
         display: 'inline-block',
         width: 'auto',
-
-        // https://github.com/ant-design/ant-design/issues/49258
-        [`${antCls}-select-arrow:not(:last-child)`]: {
-          opacity: 1,
-        },
       },
 
       '&-quick-jumper': {

components/select/demo/basic.tsx

@@ -35,6 +35,7 @@ const App: React.FC = () => (
       style={{ width: 120 }}
       allowClear
       options={[{ value: 'lucy', label: 'Lucy' }]}
+      placeholder="select it"
     />
   </Space>
 );

components/select/style/index.ts

@@ -177,16 +177,9 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
         },
       },
 
-      '&:hover': {
+      [`&:hover ${componentCls}-clear`]: {
-        [`${componentCls}-clear`]: {
+        opacity: 1,
-          opacity: 1,
+        background: token.colorBgBase,
-        },
-        // Should use the following selector, but since `:has` has poor compatibility,
-        // we use `:not(:last-child)` instead, which may cause some problems in some cases.
-        // [`${componentCls}-arrow:has(+ ${componentCls}-clear)`]: {
-        [`${componentCls}-arrow:not(:last-child)`]: {
-          opacity: 0,
-        },
       },
     },