首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何css样式angular2的NG2-完成器插件输入框和下拉颜色?

NG2-完成器插件是一个用于Angular 2的自动完成插件,它可以帮助用户在输入框中输入内容时提供自动补全的功能。要设置输入框和下拉颜色的样式,可以通过CSS来实现。

首先,为NG2-完成器插件的输入框和下拉列表元素添加相应的CSS类名或选择器,以便对它们进行样式设置。

例如,假设输入框的CSS类名为.ng2-completer-input,下拉列表的CSS类名为.ng2-completer-dropdown,可以按照以下方式设置它们的样式:

代码语言:css
复制
/* 输入框样式 */
.ng2-completer-input {
  /* 设置输入框的颜色、边框等样式 */
  color: #333;
  border: 1px solid #ccc;
  /* 其他样式设置 */
}

/* 下拉列表样式 */
.ng2-completer-dropdown {
  /* 设置下拉列表的背景颜色、边框等样式 */
  background-color: #fff;
  border: 1px solid #ccc;
  /* 其他样式设置 */
}

根据具体需求,可以在上述CSS代码中添加更多样式属性来自定义输入框和下拉列表的外观。

关于NG2-完成器插件的更多信息和使用方法,可以参考腾讯云的相关产品文档和示例代码:

请注意,以上提供的链接和产品信息仅为示例,实际使用时应根据具体情况选择适合的云计算产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2015-2016前端架构体系技术精简版

、按钮、图片、菜单、表单 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 响应式布局:布局、结构、样式、媒体、javascript响应式...第三方插件插件管理 **jQuery、zepto使用原理以及插件开发 支持amd、cmd、全局变量模块化封装 $.fn.method = function(){} **mvc/mvvm框架原理设计...数据更变检测:函数触发,脏数据检测、对象hijacking **polymer/angular2思想与设计思路 import技术 templatescript引入方式 css样式命名空间隔离 简单复用第三方库...二、构建生态 **grunt/gulp开发环境任务编写 文件处理插件:html、scss、js、image、font、其它 优化插件:雪碧图、图片压缩、iconfont构建 发布替换插件 打包、压缩包插件...、fontawesome、icomoon.io、iconfont.cn线上工具 **页面响应式设计 layout布局响应式 html结构响应式 css样式响应式 image媒体响应式 javascript

3.8K50

2015-2016前端架构体系技术精简版

点击查看github高清图 点击查看完整版 一、框架与组件  **bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset、按钮、图片、菜单、表单 组件UI样式:...按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 响应式布局:布局、结构、样式、媒体、javascript响应式 第三方插件插件管理  **jQuery...、zepto使用原理以及插件开发 支持amd、cmd、全局变量模块化封装 $.fn.method = function(){}  **mvc/mvvm框架原理设计,vue/angular/avalon...数据更变检测:函数触发,脏数据检测、对象hijacking  **polymer/angular2思想与设计思路 import技术 templatescript引入方式 css样式命名空间隔离 简单复用第三方库...、fontawesome、icomoon.io、iconfont.cn线上工具  **页面响应式设计 layout布局响应式 html结构响应式 css样式响应式 image媒体响应式 javascript

3.2K20
  • 深入理解bootstrap

    、图片、CSS媒体查询(media query)使用等 5.CSS组件 6.JavaScript插件 B.栅格系统 1.列偏移:使用.col-md-offset-*形式样式就可以将列偏移到右侧 2....“重写”意思 2.CSS组件包括:基础样式颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式 D.JavaScript插件架构 1.HTML布局规则:基于元素自定义属性布局规则...新版本使用了CSS3中@font-face特性 B.下拉菜单 C.按钮组 1.只需要在多个按扭外部使用一个窗口元素(比如div),然后在容器元素上应用 .btn-group样式即可 2.按扭工具栏,在多个分组外再放一个大容器元素..."来实现下拉菜单 2.样式.dropup向上下拉菜单 E.输入框组 1.输入框组,.input-group样式输入框前后显示个性元素上可以使用.input-group-addon 2.避免在select...2.BSIE扩展,支持IE8以下浏览器 3.Buttons扩展,基于SassCompass构建CSS按扭样式库 4.DateTime Picker插件 5.Cikonss,纯CSS实现响应式Icon

    3.4K60

    【架构师(第二十一篇)】编辑器开发之需求分析架构设计

    如何跨项目复用组件 组件良好可扩展性 编辑器整体状态 编辑器元素增删 编辑器单个元素属性额修改 属性渲染成表单 编辑器实时变化 拖动,快捷键,右键菜单解耦、插件化 ... ......组件库难点解决方案 两个项目如何复用组件 单独代码库 把组件单独抽成独立代码库,降低任何项目的耦合性,单独代码库让业务组件有独立标准开发流程。...尺寸: 长度 - 输入数字(同下面5项) 宽度 左边距 右边距 上边距 下边距 边框: 边框类型 - 无 | 实线 | 破折线 | 点状线 下拉菜单 边框颜色 - 颜色选择 边框宽度 - 滑动选择...url 地址 - 输入框 特有属性 文本 文字内容 - 多行输入框 字号 - 输入数字 字体 - 宋体 | 黑体 | 楷体 | 仿宋 ...下拉菜单 加粗 - 特殊 checkbox 斜体 - 同上...- 颜色选择 高级组件 日期显示特有属性 样式 - 下拉菜单 时间 - 默认为当前日期 日期选择器 字体颜色 - 颜色选择器 属性设计伪代码大致如下: 抽象出一些通用函数,在组件中完成通用功能,

    1.2K30

    最佳设计规范20例

    在UI设计过程中,设计规范是一个关键步骤。如何通过设计规范提高品牌一致性推动开发高度还原设计?...定义一个设计规范CSS样式库,开发过程中就不用重复修改CSS参数值,直接引用定义好变量名就可以,这样修改设计规范成本大大降低。...Alt:输入框设计规范 搜索框 输入框相同地方是都需要聚焦然后输入内容完成操作,应该有为Normal、Active、搜索下拉状态、Error状态。 ? Alt:搜索框正常状态下拉选择状态 ?...Alt:表格设计规法 弹出面板 弹出面板主要由4个部分组成,分别是面板内文本信息、按钮、面板大小样式、蒙版颜色透明度。 ?...Alt:弹出面板设计规范 数字步进器 数字步进器属于复合类型组件,可以理解为按钮输入框联动组件。所以输入框按钮拥有的属性状态,步进器都有。 ?

    2.1K31

    从零开始学 Web 之 HTML(三)表单

    3、快速建表格方式 webstorm 下快捷方式: table>tr3>td5 + tab键   PS:sublime 下需要安装 Emmet 插件。...,然后填充表格为其他颜色,设置边框距边框距离 cellpadding 为0,单元格与单元格之间距离 cellspacing 为细线边框宽度,最后看到细线边框其实是背景颜色。...PS:当有多个单选框是如何设置只能有一个被选中? 只有将 name 值设置相同时候,才能实现单选效果。...---- 三、标签语义化 好语义化网站标准就是去掉样式表文件(css文件)之后,结构依然很清晰。 根据内容结构化(内容语义化),选择合适标签(代码语义化) 有什么用? 1、网页结构合理。...3、不要使用纯样式标签,如:b、font、u 等,改用 css 设置。 4、需要强调文本,可以包含在 strong 或者 em 标签中。

    2.9K30

    Bootstrap笔记

    Otto Jacob Thornton 在 2011 - 年发起,并利用业余时间完成第一个版本开发;为什么使用Bootstarp?...让低版本浏览器可以支持CSS媒体查询功能基础CSS样式概要预置排版样式统一预制标签样式按钮样式表格样式表单样式图片样式辅助工具类代码样式栅格系统响应式工具类预置界面组件导航导航条面包屑导航下拉菜单按钮式下拉菜单按钮组输入框组警告框页头分页列表组面板媒体对象进度条...Glyphicons标签徽章缩略图大屏幕嵌入内容内嵌JavaScript插件JavaScript插件依赖情况如何使用Javascript插件内置组件模态对话框下拉菜单滚动监听标签页工具提示弹出框警告框按钮折叠面板轮播图吸顶效果...表格样式 表单样式 图片样式 辅助工具类 代码样式 栅格系统 响应式工具类 预置界面组件 导航 导航条 面包屑导航 下拉菜单 按钮式下拉菜单 按钮组 输入框组 警告框 页头...分页 列表组 面板 媒体对象 进度条 Glyphicons 标签 徽章 缩略图 大屏幕 嵌入内容 内嵌 JavaScript插件 JavaScript插件依赖情况 如何使用Javascript

    3.4K90

    HTML-CSS基础学习

    Web概述 HTML代表了结构,结构是网页骨架,从语义角度,描述页面结构。 CSS代表了样式样式是网页外观,从审美的角度,美化页面。...表示必须输入E-mail地址文本输入框 url 表示必须输入URL地址文本输入框 number 表示必须输入数值文本输入框 range 表示必须输入一定范围内数字值文本输入框...Date Pickers 可供选取日期时间新型文本输入框 HTML5废除元素 可以使用CSS代替元素 废除basefont,big,center,font,s,strike,u,tt s、...新特性 用于绘画canvas 用于媒介播放video 对本地离线存储更好支持 新特殊内容 新表单控件 新规则 新特性应该基于HTML、CSS、DOM以及JavaScript 减少对外部插件需求...,使用于块元素,内联元素使设置于first-letter一样 ::selection 设置浏览器默认背景颜色和文字颜色 ::placeholder CSS3样式属性 字体属性 font-style

    4.8K30

    Bootstrap基本入门大全

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT,它简洁灵活,使得 Web 开发更加快捷。...下面有常用bootstrap介绍,基本上就够用了,但是有些样式也没有写全,先自己学会怎么使用,再去官网上深入研究吧 1.栅格系统 定义:一系列行列构建布局,可以跟着屏幕自动布局 最多可以展示12个列...加颜色在之前名字后面加,例:list-group-item-success 5.表单 垂直样式:(默认) 表单分组:from-group 表单项(input,textarea):from-control...激活状态禁用状态 激活:active 禁用:disabled 按钮式下拉菜单 将ul列表转换为下拉菜单,添加dropdown-menu类 给button添加dropdown-toggle类 利用data-toggle...=dropdown 实现嵌套: 用来包裹多个按钮 输入框: 可以给输入框两侧分别增加按钮 用add-oninput标签组合 也可以在输入框后面加

    2.6K100

    零基础打造一款属于自己网页搜索引擎

    前言 在说这个之前,想必大家应该都比较了解搜索引擎了,它就是通过用户在浏览器输入框中输入文本,从而显示一些结果,你觉得哪项符合你要搜索内容,你就点击哪项。...2.编写Html输入框,搜索按钮 看过之前写Html系列文章,你将不再对此感到困惑。...height:30px } span{ position:absolute; 绝对定位 background-color:red; 背景颜色...width:60px; height:32px; text-align:center 文字位置 } span:hover{ 鼠标悬停时样式...从这个元素父元素中删除这个元素 2).生成选项下拉菜单 我们在浏览器可以看到,只要一输入文本,它就会弹出对应选项让我们选择,那么这是如何办到了?

    2.2K10

    Bootstrap基本入门大全

    本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载 Bootstrap 是基于 HTML、CSS、JAVASCRIPT,它简洁灵活,使得 Web 开发更加快捷。...下面有常用bootstrap介绍,基本上就够用了,但是有些样式也没有写全,先自己学会怎么使用,再去官网上深入研究吧 1.栅格系统 定义:一系列行列构建布局,可以跟着屏幕自动布局 最多可以展示12个列...加颜色在之前名字后面加,例:list-group-item-success 5.表单 垂直样式:(默认) 表单分组:from-group 表单项(input,textarea):from-control...激活状态禁用状态 激活:active 禁用:disabled 按钮式下拉菜单 将ul列表转换为下拉菜单,添加dropdown-menu类 给button添加dropdown-toggle类 利用data-toggle...=dropdown 实现嵌套: 用来包裹多个按钮 输入框: 可以给输入框两侧分别增加按钮 用add-oninput标签组合 也可以在输入框后面加

    2K10

    响应式web设计 转

    css@import指令在当前样式表中按条件引入其它样式表:  @import url("phone.css") screen and (max-width:360px);  可供媒体查询检测特性...   aspect-ratio 视口宽高比,如16/9   device-aspect-ratio 屏幕宽高比   color 每种颜色位数,如16   color-index 设备颜色索引表中颜色数...,制定离线内容设置文件xxx.manifest文件位置,其MIME类型为text/cache-manifest   http://diveintohtml5.com  CSS3:选择器,字体颜色模式...如何给不支持新特性浏览器打补丁   Modernizr http://www.modernizr.com/  用于向缺少html5/css3特性支持浏览器打补丁。   ...渐进增强:恪守Web标准标签,在此基础上通过css样式js来为更先进浏览器提供渐进式增强。

    3.6K10

    HTML基础下

    bgcolor:背景颜色。  属性rowsapn:合并同一列上单元格。  属性colspan:合并同一行上单元格。 ...  name=”username” 输入框名称  value=”内容” 将输入框内容传给处理文件 密码输入框:属性同文本输入框一致。...知识点四:标签语义化: 好语义化网站标准就是去掉样式表文件之后,结构依然很清晰。 ...标签语义化概念:根据内容结构化(内容语义化),选择合适标签(代码语义化) -标签语义化意义:  1:网页结构合理  2:有利于seo:搜索引擎建立良好沟通,有了良好结构语 义你网页内容自然容易被搜索引擎抓取...p在默认情况下有上下间距,对兼容特殊终端有利; 3:不要使用纯样式标签,如:b、font、u等,改用css设置。

    2.7K60

    【开发指南】(四)Ionic3快速上手并了解这些

    Ionic这几个网站是需要经常看,应该了解过才执行后面步骤,其中强烈要求至少先撸一遍官网组件API文档。...我们打开该文件,里面是基本配置,如$colors,可以随意增删改,当使用某种颜色时,元素标签添加color=“danger”即可使用这里定义颜色。...2)覆盖主题中个别样式 同样是在src/theme/variables.scss文件,如果你对默认样式不太满意,可以覆写对应Ionic变量,如基本背景色、文字颜色、组件宽高等等,下面代码演示设置统一背景色和文字字体...如学习typescript,才能习惯用面向对象方式书写js,学习angular2,才能了解mvc框架优缺点,知道指令、管道、组件、服务等等概念,才能更好构建你应用。...插件 混合式应用一个比较大特点是调用原生,ionic调用原生方式为Cordova插件,为了更方便调用,ionic2及以上封装了ionic-native,在使用之前,建议先了解下Cordova基本知识

    3.2K20

    Angular2 之 Animations

    Angular2动画系统赋予了制作各种动画效果能力,致力于构建出与原生CSS动画性能相同动画。 Angular2动画主要是@Component结合在了一起。...使用要点 Angular2动画是使用模型驱动方式在两个状态之间进行转换,是由状态状态之间转场效果所定义。 动画被定义在@Component元数据中。.../my-fader.css'], animations: [ // 动画内容 trigger('visibilityChanged', [ // state 控制不同状态下对应不同样式...可以把它添加到字符串中持续时间后面,它选项格式也跟持续时间是一样: 等待100毫秒,然后运行200毫秒:'0.2s 100ms'。 缓动函数 缓动函数用于控制动画在运行期间如何加速减速。...类似于CSS3中动画。

    1.9K10
    领券