正文

自定义组件选择2

 2023-05-07  138

关键词：

【中文标题】自定义组件选择2【英文标题】：Customize component select2 【发布时间】：2021-10-20 23:25:12 【问题描述】：

这个论坛的新手。我希望有人可以帮助我解决这个问题。我正在使用组件 select2 (https://select2.org) 进行选择中的某些输入。我想在同一页面中以两种不同的方式自定义 select2。

我想更改字体并删除一个边框并更改另一个字体。

代码如下：

$("#example1").select2(
  placeholder: "",
  selectOnClose: true
);

$("#example2").select2(
  placeholder: "",
  selectOnClose: true
);

<html>
  <head>
    <title>Using Select2</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Select2 CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
  </head>
  <body>
  
        
    <br>
    <br>
  
      <div class="container">
        <div class="col-md-6">
          <label>I want font size 18 and no border</label>
          <select id="example1" class="select2">
            <option>Java</option>
            <option>Javascript</option>
            <option>PHP</option>
            <option>Visual Basic</option>
          </select>
        </div>
        
        <br>
        <br>
        
        <div class="col-md-6">
          <label>I want font size 15</label>
          <select id="example2" class="select2">
            <option>Java</option>
            <option>Javascript</option>
            <option>PHP</option>
            <option>Visual Basic</option>
          </select>
        </div>
      </div>
      
    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Select2 -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js'></script>
  </body>
</html>

我还使用示例 https://jsfiddle.net/Lfvr3m74/ 创建了一个 jsfiddle

最好的问候回复

【问题讨论】：

一个好的开始是给它们两个类，这样你就可以用 CSS 设置它们的样式。如果添加类对您来说工作量太大，或者通过他们的 ID 设置样式。我试过这个没有运气：#example1.select2-container .select2-selection--single .select2-selection__rendered font-size: 18px; #example1.select2-container 不存在。请参阅下面的答案。 fyi，当您使用 select2 插件时，它会隐藏带有该 ID #example1 的原始 <select>，然后注入一堆 <span> 以创建“puesdo-dropdown”样式目的（因为众所周知，选择是不可样式化的）。该插件会在原始下拉列表之后立即注入此虚假下拉列表，因此您可以这样编写样式：#example + .select2-container .... 而不是 #example.select2-container ...。 + css 选择器选择紧跟在前一个选择器之前的元素此外，下拉列表本身是在关闭 </body> 标记之前注入的（因为可能出现溢出和堆叠问题），因此最好使用“dropdownCssClass”选项并设置列表样式围绕那个班级。阅读选项文档（此处）[select2.org/configuration/options-api]。还有一个“selectionCssClass”选项来帮助设置我上面提到的假下拉输入的样式 【参考方案1】：

您的选择器中有错误：

#example1.select2-container .select2-selection--single .select2-selection__rendered 
  font-size: 18px;

#example 元素没有 select2-container 类。 select2-container 在它下面。

例如，您可以使用这些选择器：

span.select2-container--default .select2-selection--single 
  border: none;


.select2-container .select2-selection--single .select2-selection__rendered 
  font-size: 18px;

所以不要使用选择的ID。而是看到这个问题和答案：Add class to select2 element

【讨论】：

关于 JSF 2.0 自定义组件和 Primefaces 的帮助

】关于JSF2.0自定义组件和Primefaces的帮助【英文标题】：HelponJSF2.0CustomComponentsandPrimefaces【发布时间】：2011-11-1120:17:45【问题描述】：我需要使用jsf2.0自定义组件动态创建面板。面板中的控件将从xml动态读取并在选择相应对象时呈... 查看详情

链接业务组件使用

...件是指某列以弹出层列表的方式选择数据进行录入或者自定义逻辑去完成业务的操作组件。通过配置属性（包括业务组件启动参数）即可实现。常见的有2种方式： 1：数据选择录入---参与者Join选取组件... 查看详情

flutter自定义flutter组件(创建自定义statelesswidgetstatefulwidget组件|调用自定义组件)(代码片段)

文章目录一、Flutter组件简介二、Flutter自定义StatelessWidget组件流程1、导入父类包2、选择继承的父类3、设置成员变量及构造函数4、重写build方法5、完整代码示例三、Flutter自定义StatefulWidget组件流程四、使用final修饰Widget组件成员... 查看详情

自定义选择安装offic2016组件

本次安装使用Office2016Installv3.0这个工具实现1、首先下载Office2016Installv3.0工具2、解压后出现的一个与工具名一样的文件夹以及一个安装说明（可忽略）3、下载offic2016镜像文件（.iso格式），解压4、将解压后得到的offic文件夹复制... 查看详情

css自定义选择组件(代码片段)

查看详情

winform------自定义yearmonthedit组件

转载：http://www.cnblogs.com/axing/p/3201066.html 注意：1.需要在vs里面，添加一个YearMonthEdit组件，然后将链接里面的代码拷贝到里面2.选择“项目”-》属性-》应用程序-》输出类型-》类库，生成dll文件3.右键“工具箱-常规”-》选择... 查看详情

htmlvuejs自定义选择组件使用示例(代码片段)

查看详情

具有三个组件的自定义 UIPickerView，每个组件在选择指示器上显示标签

】具有三个组件的自定义UIPickerView，每个组件在选择指示器上显示标签【英文标题】：CustomUIPickerViewwiththreeComponentseachshowinglabelonSelectionIndicator【发布时间】：2013-05-2412:05:49【问题描述】：在我的应用程序中，我正在尝试制作一... 查看详情

使用 SVG 在 Vue 上自定义选择组件

】使用SVG在Vue上自定义选择组件【英文标题】：CustomSelectComponentonVuewithSVG【发布时间】：2019-11-1616:35:41【问题描述】：我正在Vue上创建一个自定义选择组件，我正在使用tailwind设置它的样式。我想让一个chevron-downcaretsvg向右对齐... 查看详情

gridPro 中自定义日期选择器组件的值始终为空

】gridPro中自定义日期选择器组件的值始终为空【英文标题】：ValueofcustomDatePickerComponentingridProisalwaysnull【发布时间】：2022-01-0416:29:56【问题描述】：我想在vaadingridPro中使用DatePicker作为自定义组件。由于只有复选框、选择和文本... 查看详情

自定义选择组件的Angular2变换模型

】自定义选择组件的Angular2变换模型【英文标题】：Angular2transformmodelforcustomselectComponent【发布时间】：2017-08-2008:05:02【问题描述】：在我的angular2应用程序中，我希望有一个可重用的选择组件，在初稿中，它看起来像这样：importC... 查看详情

使用自定义组件

】使用自定义组件【英文标题】：Usingacustomcomponent【发布时间】：2012-12-2307:54:46【问题描述】：我正在制作一个与魔兽世界有关的应用程序。保持简短；你可以选择赋予你特定技能的天赋，在我的应用程序中我添加了一个天赋计... 查看详情

微信小程序自定义picker年月日时分秒选择器组件

参考技术A功能：年月日时分秒，固定选择范围效果：自定义组件实现：utils/datePicker.js定义组件components/datePicker/datePicker.jscomponents/datePicker/datePicker.wxmlcomponents/datePicker/datePicker.wxss使用datePicker组件index.jsonindex.wxmlindex.js 查看详情

微信小程序13（自定义组件）(代码片段)

自定义组件1.1.创建自定义组件1.1.1.声明组件1.1.2.编辑组件1.1.3.注册组件1.2.使用自定义组件小程序允许我们使用自定义组件的方式来构建页面。自定义组件1.1.创建自定义组件类似于页面，一个自定义组件由jsonwxmlwxssjs4个文件... 查看详情

material-ui 组件样式自定义 - 将选择组件的颜色更改为白色

】material-ui组件样式自定义-将选择组件的颜色更改为白色【英文标题】：material-uicomponentstylecustomization–changecolorofselectcomponenttowhite【发布时间】：2020-04-1520:39:14【问题描述】：我想使用material-ui组件的下拉菜单（请参阅https://mate... 查看详情

vue之自定义组件

组件（Component）是我的理解就是自定义元素.(一)自定义组件任何一个以.vue结尾的组件内都可以写自定义组件,一个自定义组件的使用主要2个步骤:1.注册:上代码　　2.组件使用　　查看详情

将 CSS plus 选择器与自定义组件一起使用

】将CSSplus选择器与自定义组件一起使用【英文标题】：UsingCSSplusselectorwithcustomcomponents【发布时间】：2020-04-0218:54:22【问题描述】：在CSS中，您可以使用加号选择器来选择跟在另一个元素之后的元素。例如，选择h1s之后的所有divs... 查看详情

来自自定义组件的 React Native Change State

】来自自定义组件的ReactNativeChangeState【英文标题】：ReactNativeChangeStatefromCustomComponent【发布时间】：2018-09-3021:18:48【问题描述】：我有自定义选择器组件，我想更新selectedValue和onValueChange事件的状态。如果我直接在渲染部分添加... 查看详情