开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何样式反应自动完成输入框？

问如何样式反应自动完成输入框？
EN

Stack Overflow用户

提问于 2019-03-19 04:05:48

回答 1查看 3.6K关注 0票数 4

我试图在我的组件中使用react-自动完成。一切都在运转，好的结果显示出来了。但我无法对默认输入框进行样式设置。这是自动完成的

<Autocomplete 
getItemValue={this.getItemValue}
items={this.state.autocompleteData}
renderItem={this.renderItem}
value={this.state.value}
onChange={this.onChange}
onSelect={this.onSelect} 
menuStyle={menuStyle}
/>

下拉菜单的样式很好。

const menuStyle = {
  borderRadius: '3px',
  boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
  background: 'rgba(255, 255, 255, 0.9)',
  padding: '2px 0',
  fontSize: '90%',
  position: 'fixed',
  overflow: 'auto',
  maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
  "zIndex": 100,
};

我试着按照这个问题的答案添加风格，但它不起作用。how to increase input text box size in react-autocomplete?

如何在输入框中添加样式？

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-19 04:10:08

提供给支柱inputProps的对象被用作输入的支持，因此您可以给一个带有包含menuStyles的style属性的对象。

<Autocomplete
  getItemValue={this.getItemValue}
  items={this.state.autocompleteData}
  renderItem={this.renderItem}
  value={this.state.value}
  onChange={this.onChange}
  onSelect={this.onSelect}
  inputProps={{ style: menuStyle }}
/>

票数 4

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55240673

复制

相关文章

jQueryUI实现自动完成输入框提示

jquery jquery ui

在昨天我发表了一个jQueryUI的effect方法，下面我再来给大家介绍一个通过jQueryUI来实现自动完成输入框提示的方法。他需要调用jQuery对象的 autocomplete ( )方法。先来说说他的三个常用参数： source：自动提示信息的来源。minLength：输入指定个数字符后产生提示。position：提示框的位置。autocomplete ( )常用的事件（可以绑定事件处理函数）： search：开始查找时；select：选择指定项时；close：提示框关闭后。

OECOM

2020/07/02

1.4K0

WordPress 后台样式：输入框 input class

wordpress class text 表单后台

我们在 WordPress 后台创建表单的时候，可以使用一些预定义好的 class 来定义输入框的宽度，而不需自己写样式，下图就是常用的输入框样式的效果：

Denis

2023/04/14

7320

WordPress 后台样式：输入框 input class

bootstrap 输入框组常用搜索框样式

button class form href input

div input-group span input-group-addon <div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="twitterhandle"> </div> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> </form> </div>

用户5760343

2019/07/05

3.1K0

bootstrap 输入框组常用搜索框样式

如何使用脚本完成CRC和填充值的自动完成

crc rem 编译工具脚本

恩智浦的MPC架构的微控制器使用的开发环境IDE是S32DS ,该IDE使用的GNU GCC工具链没有提供对编译结果的CRC校验和自动生成工具，所以需要我们制作一个脚本自动生成和填充，脚本调用Srecord工具执行。

用户1605515

2023/10/25

5390

如何使用脚本完成CRC和填充值的自动完成

EasyNVR前端构建之输入框样式的调整

jquery ui jquery

起初我们的界面设计是为了满足功能的需求就是，用户可以输入激活码提交，完成永久授权。在实际的应用过程中我们发现由于输入框自身大小的原因，我们的机器码有事无法完全展示给用户，不方便用户的自我检查激活码是否准确。因此我们考虑使用可以方便拉伸改变大小的输入框。

EasyNVR

2020/04/23

9730

EasyNVR前端构建之输入框样式的调整

Vue实现输入框自动聚焦

官方文档自定义指令 Vue.js <input type="text" placeholder="说些什么吧" ref="input" /> mounted() { this.$nextTick(() => { this.$refs.input.focus(); }); },

明知山

2020/09/03

2.3K0

input输入框自动消除空格

今天遇到了一个问题,用户在在前端的input里面输入id的时候，多写了个空格,数据库里面就找不到id了，所以无法获取输入的id所绑定的标签位置在哪里，现在需要在前端做一个处理，input框输入的数值里面，会自动消除空格。

王小婷

2019/05/15

4.1K0

如何用Python操作Excel完成自动办公（一）

最近工作真是超级忙，已经断更1个多月的样子了，上次我们已经写到了利用爬虫批量点赞。

python鱼霸霸

2020/06/10

1.9K0

如何用Python操作Excel完成自动办公（一）

如何用Python操作Excel完成自动办公（二）

python 编程算法

在如何用Python操作Excel完成自动办公（一）中我们已经学会了如何把数据内容写入到指定的单元格中，今天这一章节，我们就要来了解一下，如何读取Excel工作簿中的数据内容，往下看。

python鱼霸霸

2020/06/11

6650

SearchView 禁止自动弹出输入框

2、search.setFocusable(false); 3、search.clearFocus();在onresume中也需要执行，清除焦点，保证返回的时候不会再次弹出。

用户2657851

2020/03/04

2.3K0

如何使用Rekono结合多种工具自动完成渗透测试

自动化工具管理渗透测试协议

关于Rekono Rekono是一款功能强大的自动化渗透测试工具，该工具能够结合其他多种网络安全工具并以自动化的形式完成整个渗透测试过程。在工具运行的过程中所收集到的数据将通过电子邮件或Telegram同志发送给用户，如果需要更加高级的漏洞管理功能，我们还可以将其导入到Defect-Dojo以便进行后续处理。除此之外，Rekono还提供了一个Telegram Bot，我们可以将其用于在任何地方使用任何设备轻松执行渗透测试任务。功能介绍 1、结合多种渗透测试工具创建渗透测试任务； 2、执行渗透测

FB客服

2023/03/30

8180

如何使用Rekono结合多种工具自动完成渗透测试

如何用tep完成增删改查接口自动化

html python json uml php

tep的设计理念是让人人都可以用Python写自动化，本文就来介绍如何用tep完成增删改查接口自动化。

dongfanger

2020/12/29

7090

如何使用Siri完成某学云自动化打卡

自动化服务脚本接口上传图片

首先，服务运行脚本是python的，之前做了下抓包，对上传图片做了处理，可能我是唯一一个可以使xx云打卡带图的作者了，之前在逛街时，提到了猜想，并且已经认证成功了，详情可以看这里蘑菇丁x工学云的3个sign算法以及携带图片打卡(带照片打卡)猜想(已验证猜想可行) 这个文章，如果对你有需要，值得一看后来，想着完全可以开一个公益接口出来，让大家使用，只需要调用即可这个是python代码：

德宏大魔王

2023/08/08

1930

如何使用Siri完成某学云自动化打卡

自动完成PDF转Word

现在WPS和百度网盘都提供了PDF转Word的功能，但是需要充值会员。网上也有其他网站可以把PDF转成Word的，可是有一定限制。还有一些开源软件，效果就达不到要求了。经过了一番调查，发现真正完成PDF转Word的是一个来自Soliddocuments公司的程序，在smallpdf、adobe acrobat dc等网站上都有提到。

airxiechao

2022/04/25

3.9K0

[小工具]CSS内嵌样式自动提取器

逐行分析，将内联样式提取出来，并自动编号代替的一个小工具软件注：style=""(此处必须是标准的双引号！) http://files.cnblogs.com/quejuwen/CssAuto.r

阿炬

2018/05/11

1.5K0

如何获取元素样式

元素的style属性时常被用于获取元素样式，但很多时候它是不奏效的。看下面的代码：

跑马溜溜的球

2020/12/07

2K0

如何动态绑定样式

这个是我想要的页面效果，每个卡片的背景颜色都不一样 image.png 第一次需要动态绑定颜色，发现怎么写都不对。。。众大佬支招终于解决了~ 当遍历出来的每个项都需要不同的样式的时候，按照以下这个格式套进去就可以了 :style = "{'background-color':item.bgc}" image.png 如果样式绑定在遍历的每个项中，也可以通过插槽的方式获取到当行的样式 image.png

xyzzz

2020/11/25

2.2K0

如何修改alert样式

HTML5学堂：无论是PC还是移动端，系统自带alert样式总是让人感觉很丑陋，今天就教大家如何修改alert弹窗样式。只能自定一个弹窗样式首先必须明白的一点是，alert()只是一个方法，而这个方法内部是native code，这是我们无法修改的部分，而最终暴露的只有这个alert()方法名字而已，你甚至拿不到alert的属性，因此要真正意义上的做到修改alert样式是不可行的。有了以上这个条件基础，我们能做的只有重写alert()方法，替换掉系统自带的alert()方法。一行代码替换alert(

HTML5学堂

2018/03/12

7.1K0

点击加载更多

相似问题

自动完成输入框的样式

22

自动完成输入框

20

jQuery自动完成输入框

25

自动完成样式定制

12

Jquery自动完成样式

20

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验