Item that was chosen is not visible in the dropdown menu

Here is a snippet of HTML code:

   <div class="col-lg-7 col-md-7 col-sm-7"> 
   <select class="tblselect2 ">
   <option value="">Item 1</option>
   <option value="">Item 1</option>
    </select>
   </div>

This CSS is used to style the select option:

.tblselect2 {

    background: url("../images/arrow1.png") no-repeat scroll right center white;
    font-size: 12px;
    height: 18px;
    line-height: 1.5;
    margin-bottom: 0px;
    padding: 2px 0 17px 0;
    line-height: 1.5;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    color: #555555;
    width: 64%;
}

However, when this css is applied, the selected value is not displayed in the select box. The aim is to add this css to style the select button and include an image for the right dropdown.

htmlcss

Answer №1

The reason for the hiding behavior is due to the height and padding settings in your CSS. To resolve this, you can update your CSS as shown below:

.tblselect2 {
background: url("../images/arrow1.png") no-repeat scroll right center white;
font-size: 12px;
height: 24px;
line-height: 1.5;
margin-bottom: 0px;
padding: 2px 0 4px 0;
line-height: 1.5;
border: 1px solid #d9d9d9;
border-radius: 4px;
color: #555555;
width: 64%;
}

MODIFIED CSS:

If you wish to hide the original select box arrow, you can achieve this with the following CSS. Please note that this solution is compatible with IE10+ and Chrome browsers only, and may not work on older versions of IE.

.tblselect2 {
background: url("http://www.fifa.com/imgml/icons/events/arrow_Down_Red.gif") no-repeat 99% 5px white;
font-size: 12px;
height: 24px;
line-height: 1.5;
margin-bottom: 0px;
padding: 2px 0px 4px 0;
line-height: 1.5;
border: 1px solid #d9d9d9;
border-radius: 4px;
color: #555555;
width: 64%;
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none;
} 
.col-lg-7 select::-ms-expand{
display: none;
}

VIEW DEMO

Answer №2

Revise the following line in your css script and define the height

  padding: 2px 0 10px 0;
  height:30px;

http://jsfiddle.net/58KmZ/2/

Answer №3

Eliminate any excess padding in your CSS styling.

padding:

Answer №4

To reveal the change, consider raising the height while reducing the padding-bottom.

height: 25px;
padding: 2px 0px 5px 0px;

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

Disabling the visibility of elements through a transparent sticky-top menu

I'm having an issue with my website design. I have a gradient background and a sticky-top menu on the site. The problem is that when I scroll down, the content appears through the menu, which is not ideal. I don't want to apply the same gradient ...

javascripthtmlcssnavbar

Utilizing variable values in HTML and CSS to enhance a website's functionality

My current project involves modifying an HTML web resource for use in Dynamics 365. I need to replace a static URL with a dynamic value obtained via Javascript, specifically: var URL = Xrm.Page.context.getClientUrl(); There are multiple instances within ...

javascripthtmlcssmicrosoft-dynamics

Tips for adjusting the width of ngx bootstrap modal?

Is there a way to adjust the width of my ngx bootstrap modal so that it is not fixed? I have attempted to modify it in the HTML code below but without success: Here's the HTML snippet: <div bsModal #childModal="bs-modal" class=" ...

cssmodal-dialogstyles

Navigating between different pages on datatables with rowspans

I'm encountering a challenge in paginating a datatable with rowspans. The issue arises when setting the "pageLength" attribute, as it includes all trs. For instance, if I have a structure like this, I would need to specify "pageLength: 3". ----------- ...

javascripthtmldatatables

Experiencing an issue with referrer: The global symbol needs an explicit package name

my $refer = $ENV{HTTP_REFERER}; my $gk1 = substr($str1, -4); if ($gk1 = .swf) { my $antigk = "gk detected"; } else { my $antigk = $link; } I am encountering issues with this code after making some modifications. What could be causing the errors? I ...

htmlperl

Retrieving event.data from the input handler on a textarea element

I've spent the past few days researching this issue. Here's some context to help explain the goal: I have a textarea and I want it to detect special characters (like @) that I define as part of a dictionary. It should then display an autocomple ...

javascriptjqueryhtml

What is the best way to ensure these elements are neatly stacked one on top of the other?

Is there a way to center this text div while keeping it behind a fading image on the page? I've tried using margin-left: auto; and margin-right: auto; but it doesn't seem to work. Am I missing something? I'm testing everything in Chrome, ju ...

htmlcssalignmentcenter

Vertical text frozen at the top of a table

My goal is to design a table with frozen threads and vertically oriented labels in the header. I have made an attempt at implementing this below, but as a newcomer to CSS, I am facing several challenges. One issue I've encountered with my solution ...

jquerycsshtmlhtml-table

Is it true that textarea is not compatible with AJAX .val() or .text() methods?

I'm attempting to utilize AJAX requests in order to transmit textarea data to a google form, however it appears that .val() isn't functioning correctly with textarea specifically. How can I resolve this issue? My goal is to enable individuals to ...

javascriptjqueryhtmlajaxtextarea

What is the best way to distinguish a particular item in a <select> element and include a delete button for each row using jQuery?

1.) I've set up a nested table and now I want to ensure that when the 'Delete' button within the child table is clicked, its corresponding row gets deleted. 2.) I have a <select> tag. The issue is how can I implement validation to che ...

javascriptjqueryhtml

Determine the number of elements in a Css selector and restart the counter whenever an element

Need help with counting elements that are not part of a regular list structure. Here is a code example to clarify: Fiddle I don't have much control over the HTML. The DOM structure looks like this: <div class="body"> <div><p clas ...

htmlcsscss-counter

Retrieve data from a table with XPath expressions

Looking to gather details from this specific website link: Focusing on extracting the number of bedrooms from a table. <div class="panel panel-primary"> <div class="panel-heading">Property Details</div> <div class="panel- ...

htmlparsingxpathweb-scrapingweb-crawler

Having trouble setting the background of a div in CSS

How can I apply the background-color: #f8f8f8 class to the step class without interfering with the display of the horizontal lines after 1, 2? What could be causing this issue? .main-progress { text-align: center; position: relative; margin- ...

htmlcss

Sending a base64 image of a canvas to a servlet

I have a JavaScript function that uploads HTML5 canvas base64 image data to a servlet. Here is the code: function saveDataURL(a) { var postData = "canvasData="+a; var ajax = new XMLHttpRequest(); ajax.open("POST",'uploadPhoto.cgi',tr ...

javajavascripthtmlservletscanvas

"Error: The function $(...).autocomplete is not recognized" in conjunction with Oracle Apex

Currently experiencing some frustration trying to solve the issue at hand. The Uncaught TypeError: $(...).autocomplete is not a function error keeps popping up and I have exhausted all resources on Stack Overflow in an attempt to fix it. This problem is oc ...

javascriptjqueryhtmljquery-uioracle-apex

Three-color linear gradient SVG with a middle color expanding in width

I'm working with a linear gradient and here is the code: <svg width="120" height="240" > <linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> ...

htmlcsssvg

Adjusting the cell size to align with the height of another cell in the same row

Within a table row, I have two cells that contain divs and the height varies due to changing content. Is there a way for one cell to take up 100% height to match the other cell? You can see an example here. The goal is for the second cell and its div to ...

htmlcsscss-tables

How can you reposition a component within the dom using Angular?

Just started learning Angular, so I'm hoping this question is simple :) Without getting too specific with code, I could use some guidance to point me in the right direction. I'm currently developing a small shopping list application. The idea i ...

javascripthtmlangulartypescript

`Apply event bindings for onchange and other actions to multiple elements loaded via ajax within a specific div`

My form includes various input fields, dropdowns, and text areas. Upon loading, jQuery locates each element, sets its data attribute to a default value, attaches an onchange event, and triggers the change event. The issue arises when some dropdowns are d ...

javascriptjqueryhtmlajaxevents

Set the title attribute according to the content of the <p> tag

Recently, I encountered a situation where I had numerous p tags with a specific class (let's call it .text). My task was to include the title attribute containing the text of each tag. For example: <p> Hello, world </p> This would resul ...

javascriptjqueryhtml