How can I adjust the widths of two input fields in a jQuery select box?

I found this cool jquery plugin that enhances the appearance of select dropdown boxes. You can check it out here: http://code.google.com/p/select-box/

Take a look at this fiddle to see how it works: http://jsfiddle.net/FQKax/1/

I've been trying to make the two dropdowns have different widths, but I've tried various methods like wrapping them in divs and modifying the javascript code to assign them different ids with no success.

On top of that, I'm struggling to change the color of the text within the dropdown itself. I can modify the background color, but changing the text color seems to be more challenging...

Answer №1

There is an option available to customize the classname for the sbHolder object, but reluctance to change it due to the necessity of rewriting the CSS. It would be beneficial if an additional class could be set for application, yet this feature is lacking.

A workaround involves enclosing the select element within a wrapper and utilizing CSS to override the default width http://jsfiddle.net/FQKax/8/

.wrapper-one .sbHolder{
    width: 500px;
}

.wrapper-two .sbHolder {
    width: 200px;
}


<div class="wrapper-one">
<select id="language">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
</div>
<br/><br/>

<div class="wrapper-two">
<select id="language2">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
</div>

Extra markup is necessary for this solution, unlike @cih's method which relies on jQuery to individually mark each instance accordingly http://jsfiddle.net/FQKax/37/

$("#language").selectbox();
$("#language2").selectbox();

$(".sbHolder").each(function(index){
    $(this).addClass('instance-' + index);
});

.instance-0.sbHolder{
    width: 500px;
}

.instance-1.sbHolder {
    width: 200px;
}

Answer №2

$(".sbHolder").first().addClass("first");

If you want to target your first checkbox with a specific class, the code above will help you achieve that. In case you need to iterate through multiple selectors more efficiently, you can refer to this useful resource.

In addition, Joe has provided further responses to address the rest of your query.

Answer №3

Check out this implementation http://jsfiddle.net/FQKax/30/

<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>


<select id="language">
 <option value="javascript">Javascript</option>
 <option value="objective-c">Objective C</option>
 <option value="python">Python</option>
</select>
<br/><br/>

<select id="language2">
  <option value="javascript">Javascript</option>
  <option value="objective-c">Objective C</option>
  <option value="python">Python</option>
 </select>


  ##### JQUERY #######
      $(function () {
        $("#language").selectbox();
        $("#language2").selectbox();
        $(".sbHolder").each(function(){
          var $langDom = $(this);
          if($langDom.prev().attr('id') == 'language'){
            $langDom.addClass("language_1");  
          } else if($langDom.prev().attr('id') == 'language2') {
            $langDom.addClass("language_2");          
         }
       });
     });

    ###### CSSS TO ADD #####
   .language_1{
     width: 1200px;
    }

    .language_2{
      width: 200px;
     }

Answer №4

To adjust the text color, simply modify the following CSS classes:

.sbOptions a:link, .sbOptions a:visited {}
and/or
.sbOptions a:hover, .sbOptions a:focus, .sbOptions a.sbFocus {}
.

When it comes to the widths, remember that .sbOptions controls the dropdown width, while .sbHolder {} determines the width of the currently selected item.

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

Generate a dynamic JSON object using JavaScript and then deliver it back

I'm dealing with a function that is supposed to return a JSON object in this format: this.sampleFunction = (x, filename) => { if (x.isPresent()) { return { 'result': true }; } else { return { 'result&apos ...

Conflicting elements in Drupal's Flexslider causing a disruption

Having some trouble getting Flexslider to work on my website. I've searched through forums and the project page but couldn't find any solutions that worked for me. I installed it on another site without any issues, so I think this might be a uniq ...

Django and jQuery: Making Select Boxes Cascade in Sync?

In order to create a Country/State selector, the first step is choosing a country, followed by the display of states for that country in the 2nd select box. While accomplishing this task using PHP and jQuery is relatively straightforward, I have found Djan ...

iOS devices experiencing issues with fixed positioning

Currently, I am in the process of implementing a few instances of , but I am encountering some issues with the CSS. When viewing the website on an iPad or iPhone, the calendar is positioned correctly as the container covers the window like a fixed position ...

What is the best way to change the CSS of a particular element within the #shadow-root (open)?

Can you help me modify the display of the p element inside the SR element with the #one id using CSS? #one ?SHADOW-ROOT-QUERY-SELECTOR? p { display: none}; <div> <p>My Website</p> <div id="one"> <!--#shadow-root (o ...

Show or hide a div element in AngularJS based on a selected option without utilizing a controller or model

Just diving into Angular JS and looking to toggle the display of div based on select option without involving controller or model. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <select class= ...

Make your Bootstrap table interactive with editable icons

I have incorporated a bootstrap table into my react application and I am looking to add a feature where each row has an edit icon. When clicked, the entire row's elements should become editable. Currently, this is how my table looks: <Table classN ...

Is there a way to preserve line breaks when programmatically copying text to the clipboard with JavaScript?

Utilizing Javascript alongside a duo of devexpress asp.net controls to dynamically duplicate the contents of an ASPxMemo (multiline textfield) and assign those contents as the body of an email. The copying and pasting is functioning correctly for the most ...

What is the behavior of WebMethod when an Ajax Call is made?

When invoking a WebMethod on a webpage using jQuery, we set it as static. However, static methods always have only one instance. What occurs when multiple web requests are sent? Is it truly happening asynchronously or are all the requests queued up, wai ...

Is there a way to use jQuery draggable to move a zoomed image within a div clipping mask?

Looking to enhance user experience, I am developing an interface that allows users to zoom in on an image and move the zoomed version within a clipping mask div. I have created a div with dimensions of 200px by 200px and set overflow: hidden. Then, I inse ...

Showing hierarchical JSON information with jQuery datatable

Following the completion of a POST request via AJAX, I receive the JSON response outlined below: { "ServiceName": "ABC", "Response": { "Object": [ { "Attributes": { "Attribute": [ { ...

Utilize the event bus by calling `this.$root.$emit` command

I recently implemented a basic Event bus in my application to dynamically change styles on a page, and it's functioning correctly. The event bus is triggered using the $emit and $on methods as shown below: EventBus.$on and EventBus.$emit('call ...

Creating a custom class or function for generating a table-like list view in HTML using PHP and jQuery

Currently, I am utilizing PHP and jQuery for my website and I am in search of a class or function that can easily translate an array or the results of fetches into a table with listview-like features. This includes resizable columns, customizable colors, a ...

unusual actions when decoding JSON data

For my current project, I am constructing a JSON object using JavaScript in the following manner: jsonArr.push({ position: 'WN', wind: windWN, wave: waveWN, sea: seaWN }); var myJs ...

What causes the appearance of a nested URL like '/auth/auth/ ' when the original URL does not exist?

While following a tutorial, I encountered an issue where if the URL is not included in the routes.ts file, it redirects to a nested /auth/auth/...../login/ instead of redirecting to localhost:3000/auth/login middleware.ts import authConfig from "./au ...

Discovering and choosing the appropriate course

I am facing a situation where I need to specifically select an element with the class .foo, but there are two anchor tags, both having the class .foo. However, I only want to select the one without the additional .bar class. How can I achieve this? <a ...

Encountered a runtime error while processing 400 requests

Current Situation: When authenticating the username and password in my Ionic 2 project using WebApi 2 token authentication, a token is returned if the credentials are correct. However, a 400 bad request error is returned if the credentials are incorrect. ...

Utilize an external JavaScript file function within an AngularJS controller

I have an external JavaScript file with additional functions that I am trying to call from an Angular controller. Here is an example of the external.js file: ... ... function fun() { ... ... } ... ... The controller in question is called acccountCon ...

Choosing attribute values from a list with jQuery

Can jQuery select multiple items at once like this: // Example $('input[name=val1 or val2 or val3...]') Currently, I am attempting to achieve the following: $("input[name='A'] input[name='B'] input[name='C']").blu ...

Error: The variable "email" is not defined

Hey there, I could really use some assistance as a struggling developer. I've been at it all day trying to resolve this issue with no luck. It should be a simple task of posting from my AddUsers class and storing it in my SQL database. The state upda ...