设置为焦点时如何在缩放模式下使搜索框在网页上可见答案

【问题标题】：How to make a search box visible on a web page in zoom mode when set to focus设置为焦点时如何在缩放模式下使搜索框在网页上可见
【发布时间】：2017-02-02 11:12:48
【问题描述】：

当我处于 100% 缩放模式并且将焦点设置到网页上的搜索框时，我可以毫无问题地看到整个搜索框，但是如果我处于 200% 缩放模式并且如果我将焦点设置在搜索框上，然后我只看到一半的搜索框。在任何缩放模式下如何确保整个搜索框对用户可见。

代码：

<input id="searchbox" title="SearchBox" height= 100% padding = 0 5px 0 15px width=200px border-style="none">

上面是搜索框输入元素代码。我在网页内的搜索框我无法更改宽度和填充，因为它与其他元素重叠。有什么方法可以在聚焦页面时滚动以使其完全显示

【问题讨论】：

您有示例 URL 吗？我的第一反应是不用担心，因为放大控件的用户大多需要查看控件，不一定是整个控件或其周围的内容。
您无法访问该网址
我的搜索框有一个下拉按钮，可以让用户看到选项，在缩放模式下，只有一半的搜索框可见，所以用户看不到下拉按钮
在真空中，因为我看不到它，也许是 max-width 并希望缩放的用户会意识到事情会被截断/剪辑。
@aardrian 在堆栈溢出的缩放模式下，只有顶部的搜索框被截断，当标签或单击搜索框时，只有搜索框的一部分可见。在这种情况下如何让它完全可见？

标签： javascript jquery html accessibility

【解决方案1】：

您需要使用搜索输入字段的框大小和宽度。即使在 400% 缩放时，这里的代码也适用于您。

.searchbox{  
box-sizing:border-box;
padding:7px 10px;
width:100%;
}

<input id="searchbox" title="SearchBox" class="searchbox" placeholder="Search...">

【讨论】：

【解决方案2】：

你可以试试 CSS 悬停效果，即在悬停时你可以增加输入框的大小

#searchbox:hover{  
  /* Increase size or padding */
}

【讨论】：

【解决方案3】：

$('.elementClass').get(0).scrollIntoView();

在任何缩放模式下，您的元素都会被聚焦。

【讨论】：