input type="search" 元素里面增加放大镜图标

Question

Hello, how can i increase the "size" of the magnifying glass Icon inside the input type="search" element. I am using jQueryMobile.

到目前为止我试过这个：

.ui-input-text input, .ui-input-search input{
    font-size: 24px !important;
    height: 60px !important;
}

.ui-icon-search:after{
    font-size: 300px !important;
    width: 200px !important; 
}

我的FIDDLE.

不幸的是，即使在使用浏览器检查器后我也找不到更多信息。

Answer 1

您的选择器（.ui-input-search:after 是正确的）是错误的，它是背景图像而不是字体图标，因此字体大小不会影响显示的放大图标。

下面应该让您了解它是如何工作的：

.ui-input-search:after{
    display: block;
    width: 30px !important;
    height: 30px !important;
    background-size: contain;
}

Answer 2

代码有 2 处错误

1) 放大镜不是文字而是图像，所以你不能明显地增加它的 font-size 宽度或高度。您需要用更大的图像替换图像或使用 background-size 控制它，然后增加宽度和高度以匹配背景大小。

.ui-input-search:after{
  background-size: 25px 25px;
  width: 25px;
  height: 25px;
}

2) 您试图使用 .ui-icon-search:after 来控制该图标，这是错误的。 :after 在 .ui-input-search:after.

Answer 3

因为是背景图片，所以增加字体大小不会有任何改变。相反 -

首先使 background-size 变大，例如：

.ui-alt-icon.ui-icon-search::after, .ui-alt-icon .ui-icon-search::after, .ui-input-search::after {
  background-size: 20px 20px;
}

然后根据那个 background-size 你可以增加 element 的 height, width 比如:

.ui-input-search::after{
    height: 20px;
    width: 20px;
}

参见 fiddle： https://jsfiddle.net/1417fjt9/1/

input type="search" 元素里面增加放大镜图标

Increase magnifying glass Icon inside the input type="search" element

html

css

jquery-mobile