Adjust the Size of Bootstrap 4 Dropdown Caret Icon

Currently, I am using the Bootstrap v4 framework on my HTML page. I am looking to resize or increase the caret size in my dropdown list. Does anyone have any tips on how to accomplish this?

https://i.sstatic.net/kCNPK.png

Below is the code snippet:

<div class="container">  
<form name="books">
    <div class="form-group">
    <select class="form-control" style="height:3rem">
        <option>Select Category</option>
        <option value="1">Tamil</option>
        <option value="2">English</option>
        <option value="3">Mathematics</option>
        <option value="4">Science</option>
    </select>
    </div>
</form>
</div>
htmlcssbootstrap-4caret

Answer №1

To achieve this, simply adjust the border size accordingly

.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .3em;
    vertical-align: middle;
    content: "";
    border-top: .5em solid;
    border-right: .5em solid transparent;
    border-left: .5em solid transparent;
}

Answer №2

Give this css a shot

-webkit-appearance: none; Use this to turn off the default caret and substitute it with a background image.

 select.form-control{
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #fff;
    -webkit-appearance: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">  
<form name="books">
    <div class="form-group">
    <select class="form-control" style="height:3rem">
        <option>Select Category</option>
        <option value="1">Tamil</option>
        <option value="2">English</option>
        <option value="3">Mathematics</option>
        <option value="4">Science</option>
    </select>
    </div>
</form>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging Enums in Angular 8 HTML template for conditional rendering with *ngIf

Is there a way to implement Enums in an Angular 8 template? component.ts import { Component } from '@angular/core'; import { SomeEnum } from './global'; @Component({ selector: 'my-app', templateUrl: './app.componen ...

htmlangulartypescriptenums

Choosing a component without an identifier

Trying to select an element from a webpage can be a bit tricky. After inserting a control into the page and needing to set some values for an element inside the control at pageload from C# code, you may encounter issues with id prefixes being appended due ...

c#html

Issue with content not wrapping inside the body tag (apart from using float or setting body and html to 100

Why on earth is the body/html or .main div not wrapping my .container div's when the browser width is between 767-960 px?! This is causing horizontal scrolling and I am completely baffled. This should definitely be working! The only code I have is: ...

htmlcss

Using touch-action to enable movement from the last item to the first item in HTML/C

Currently, I am utilizing the touch-action property in my carousel which auto slides without any issues. However, I am facing a problem where when I scroll using touch-action, it stops at the last slide instead of looping back to the first slide. My goal i ...

javascriptjqueryhtmlcss

Looking for assistance with text alignment?

23 Years Young From: The Boogie Down Bronx Heritage: Puerto Rican Pride Trade: Master Tailor For a demonstration, click on this link ...

htmlcss

CSS Layout - Float: What's floating to the top?

Are there any CSS techniques available to make floated blocks fill in both upwards and in their float direction? For example - https://i.sstatic.net/uo06B.png Instead of - https://i.sstatic.net/oEijA.png I know this can be achieved using JavaScript li ...

csslayoutcss-float

Position items within the dynamically generated div without appending them

Utilizing JavaScript, I dynamically generate a line but struggle to position two balls at both the 1/3 mark from the beginning and end. For reference, please view the image below. I aim to have two balls appear upon pressing enter in the input box. Despite ...

javascripthtmlcss

How can I successfully store multiple file uploads and additional data simultaneously within a single form using php, jquery, and mysql?

Check out this form View From <form class="form-horizontal" role="form" id="frm_bulletin_board" method="post"> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Title <font sty ...

phpjqueryhtmlmysql

Translucent" outline for an "opaque" object

Consider the following HTML snippet: <div id="my_div"> </div> Now, let's take a look at the CSS code: #my_div { width: 100px; height: 100px; background-color: #0f0; op ...

htmlcss

The output of new Date() varies between app.js and ejs

app.get("/test",function(req,res){ var d = new Date(); res.send(d); }); When I access mydomain/test, it displays the output "2019-03-19T04:50:47.710Z" which is in UTC. app.get("/testejs",function(req,res){ res.render("testejs");}); Below is the content ...

javascripthtmlnode.jsexpressejs

revealing the hidden message on the back of the card

I have been working on creating flipping cards for my website using CSS, but I am facing an issue. Even after styling my cards as per the provided CSS code, I am unable to make them flip when I hover my mouse over them. .row { padding-top: 25px; } .c ...

htmlcssbootstrap-4

Adjusting Anchor Links to Account for a Fixed Header

There have been a few posts discussing similar issues (like offsetting an html anchor to adjust for fixed header), but none of the solutions seem to work for my specific situation. I am currently using jQuery to generate a Table of Contents, following the ...

jqueryhtmlcssheader

How to place a Div element in the middle of a webpage

My webpage background features an image of old Tbilisi, and here is the code I am using: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <style> #links { margin: 0 auto; ...

csshtml

Scrolling a div automatically without affecting its parent element

On a page, I have a scrollable list of items that can be updated with a PUT request. Once the update is successful, another network request is made to fetch the updated list. The goal is to automatically highlight the recently updated item in the list. Al ...

javascripthtmlcssreactjs

Guide on transforming Div content to json format with the use of jquery

I am trying to figure out how to call the div id "con" when the export button is clicked in my HTML code. I want it to display JSON data in the console. If anyone has any suggestions or solutions, please help! <html> <div id ="con"> < ...

javascripthtmljqueryjson

What is the best way to completely eliminate a div from a webpage

I've created a new div element using jQuery: $(document.body).append('<div id="test"></div>'); Then, I display a success message and remove the div after 10 seconds: $('test').html('SUCCESS!'); setT ...

javascripthtmljquerycssecmascript-6

The functionality of the combobox in Vuetify differs from that of an input field

I have implemented Vuetify and am using its combobox component for search functionality on my website. However, I have noticed that the text value in the combobox only gets added to the watcher when the mouse exits the field. This behavior is not ideal f ...

javascripthtmlcssvue.jsvuetify.js

Ways to modify the input field value in my form based on the current page context

I am currently developing a website for a sports event organization company using Angular, HTML/CSS. The focus of this website is on the triathlon sport and it consists of several stages. On the home page, there are five image tags representing each stage ...

htmlcssangulartypescript

How to make a drop-down select list remain open even after selecting an option

In my current project, I have a dropdown box that holds a list of files which can be deleted. The user needs to select the file they want to delete from the dropdown each time and then the process repeats for every file. I would like to implement a feature ...

jqueryhtml

Error in Javascript: Null Object

I have created an upload page with a PHP script for AJAX, but I'm encountering errors in Firebug. Also, the upload percentage is not being returned properly. Currently, I can only do one upload in Firefox and the script doesn't work in Chrome. H ...

phpjavascripthtmlajaxupload