How to style the first dropdown value in AngularJS to appear bold?

Is there a way to style only the first value in a dropdown list as bold without using jQuery? Here is the code for the dropdown:

<div class="col-xs-3">
    <select-box id="ad-version-select" options="curItem.stats.version" model="state.version" initial="All" change="watchvalue()" ng-disabled="state.partialDisable"></select-box>
</div>

<select class="form-control" ng-model="model" ng-change="change()">

    <option ng-if="initial.length" ng-bind="initial" value=""></option>
    <option ng-repeat="option in options" value="{{getValue()}}" ng-selected="model==getValue()" ng-bind="getTitleVariable()"></option>
</select>

I attempted to use the following CSS:

<style>
div.col-xs-3>div:first-child {
    font-weight: bold;
}
</style>

Unfortunately, this method did not work. I am still trying to find a solution to make only the first value in the dropdown appear bold. Any suggestions or guidance would be greatly appreciated!

javascriptjqueryhtmlcssangularjs

Answer №1

To achieve the desired effect, you will need to adjust your CSS selector. Specifically, target the first child of the option element and apply the font-weight: bold; property.

option:first-child
{
  font-weight: bold;  
}

For a live example, you can check out this Fiddle.

I hope this solution is helpful for you.

-Assistance :)

Answer №2

To implement ng-options with ng-class, you can do the following:

<select ng-model="Blah">
  <option ng-repeat="person in persons" ng-class="{blue: person.id == 2}" ng-selected="{Blah == person.Name}">{{person.Name}}</option>  
</select>

app.controller('AppController',
[
  '$scope',
  function($scope) {
    $scope.persons = [
      {id: 1, Name:'Alice', Eligible:true},
      {id: 2, Name:'Bob', Eligible:false},
      {id: 3, Name:'Charlie', Eligible:true},
      {id: 4, Name:'Diana', Eligible:false},
      {id: 5, Name:'Eve', Eligible:true}
    ];

    $scope.Blah = 'Charlie';

  }
]);

Check out the Plunker demo

Answer №3

It seems that using the solution from @Help should do the trick. However, keep in mind that not all browsers support styles within <select><option> tags. You may have to create a custom component like the one below:

<div class="select">
  <div class="selected" ng-bind="current.title"></div>
  <div class="options">
    <div class="option" ng-repeat="option in options" value="{{option.value}}" ng-bind="option.title" ng-click="current=option"></div>
  </div>
</div>

.option:first-child {font-weight: bold;}

To achieve a similar functionality as a standard <select>, you will need to incorporate additional scripts and styles.

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

How to create vertical spacing between <a> elements within the same div using HTML and CSS

Currently, the layout in picture 1 shows how my content is displayed. I am looking to create spacing (bottom margin?) between the images like the example in picture 2. The two side-by-side blocks are separate DIVs, and the images within each line belong to ...

htmlcssimagemargin

Retrieve the data from an HTTP Request using AngularJS

I've been working on creating a JavaScript function that sends an HTTP Request to retrieve data, but I'm struggling with how to handle and use the result in another function. Here are the two functions I've tried (both intended to achieve t ...

javascriptangularjsasynchronoushttprequestdeferred

Tips for including vue-autonumeric in your webpack 2 setup

Encountering a problem while bundling the vue-autonumeric package with Webpack 2, where the dependency AutoNumeric is not being found properly. Although there is an alias set up in the configuration that works fine with webpack 3, it seems to fail when wo ...

javascriptwebpackvue.js

The issue with Jquery.Validate not functioning properly when trying to upload a file

I have integrated jQuery validation into my ASP.NET MVC project, and it is functioning correctly with textboxes. However, I am encountering an issue with file uploads. Below is the code snippet I am using: @model ffyazilim.Management.Model.Credential.Crea ...

javascriptjqueryasp.net-mvcjquery-validate

Tips for avoiding repeated Modal Popup instances and preventing the page from automatically scrolling to the last element when using ReactJS

I've been working on a project where I'm fetching data from a server and displaying 10 different sets of data in Bootstrap cards using the map() function. Each card contains a button to open a modal, along with a Link that shows the route related ...

javascriptreactjsreact-hooksbootstrap-modalreact-bootstrap

How can you modify the color of a <canvas> element using CSS?

Can the HTML5 element's color be modified using CSS as opposed to JS? I am looking to personalize qTips tooltip pointers with specific LESS CSS instructions that cannot be referenced through jQuery. ...

jquerycsscanvascolors

How to Handle 404 Errors for Specific Express Routes and Not Others

Struggling with the setup of a single page app using Angular routes on the front end, while facing backend issues. All database-related routes are functional, but any additional route designed to serve an HTML file or simple text like "hello world" result ...

javascriptangularjsnode.jsexpressurl-routing

The setInterval function in JavaScript fails to update the result

I have successfully implemented a countdown function that is working as expected. // Set the date we're counting down to var countDownDate = new Date("<?= $stop_datejs ?>"); // Update the count down every 1 second var x ...

javascriptphp

The language is being detected, but the translation feature is not functioning properly with i18n

I've configured the i18n middleware in my Express Node js server as follows: // server.js import i18nMiddleware from 'i18next-express-middleware'; import i18n from 'i18next'; import Backend from 'i18next-node-fs-backend'; ...

javascriptnode.jsexpressinternationalizationi18next

Is it possible for the relative path of a gif image to become invalid when added to a div?

Question Context: In the view, I have a form that will show a loading 'spinner' gif when a user submits it. The Problem: If I place the spinner img element within its container div, the spinner is always displayed, which is not desired: https ...

javascriptjqueryhtmlasp.net-mvcrazor

"Exploring the benefits of using nested mapping for res.json() in an Express application

I have been developing an express application (server-side) that offers movie information to users, and I am attempting to send a JSON response in the following format: { "title": "Star Trek: First Contact", "year": 1996, ...

javascriptapiexpressrestknex.js

A simple program capable of holding two variables

To create a calculator, I want to implement a process where the user clicks buttons to input numbers into a display box. For instance, clicking 3 and then 2 should display as 32 in the input box. After that, if I click on the "+" button, it should remove t ...

javascriptjqueryajax

Steps for organizing a particular key in a map

I need assistance sorting my map based on the "time" value, but so far, I haven't been successful in finding a solution after searching online extensively. If anyone has any insights or recommendations, please share them with me. This is how my Map ...

javascriptangularjssortinghashmap

"Enhancing User Experience with Multiple Conditional Checkboxes in jQuery

Having difficulty making a checkbox change some HTML content using JQuery. There is a standard html checkbox with the following attributes <input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN10" id="3mcq"> <input type="checkbox" nam ...

javascriptjqueryhtml

Is there a way to track whether a user has logged into the Google Chrome browser using cookies?

While the LSID cookie can indicate if a user is logged into a Google account, it cannot be reliably used to determine if someone is signed into the Chrome browser because it may also appear when a person is signed into Gmail without being signed into Chrom ...

javascriptgoogle-chromeauthenticationcookiesgoogle-chrome-extension

Is there a way to access the active request being processed in a node.js environment?

I am currently working with express.js and I have a requirement to log certain request data whenever someone attempts to log a message. To accomplish this, I aim to create a helper function as follows: function logMessage(level, message){ winston.log(le ...

javascriptnode.jsexpress

Tips for sequentially calling multiple await functions within a for loop in Node.js when one await is dependent on the data from another await

I am currently facing a challenge where I need to call multiple awaits within a for loop, which according to the documentation can be performance heavy. I was considering using promise.all() to optimize this process. However, the issue I'm encounterin ...

javascriptnode.jsexpressasync-awaitpromise

The keyup event fails to trigger for the search input in datatables when ajax is being used

When loading a page with a jQuery datatable via AJAX, I am aiming to implement custom filtering when the user starts typing in the default filter provided by datatables. The custom logic needs to be applied when the keyup event is triggered. Since AJAX is ...

javascriptjqueryajaxeventsdatatable

Tips for maintaining state URL persistence after a page refresh in Next.js 13 when utilizing next-usequerystate

Currently, I am using the next-usequerystate library with Next Js 13. However, I have encountered an issue where the state on the URL is lost when I refresh the page. The initial URL looks like this: localhost:3000/?page=1&genres=tree But upon refres ...

javascriptreactjsnext.jsnext.js13nextjs-dynamic-routing

What is the best way to determine the total of values from user-input fields that are created dynamically

Scenario- A scenario where a parent component is able to create and delete input fields (child components) within an app by clicking buttons. The value of each input field is captured using v-model. Issue- The problem arises when a new input field is crea ...

javascriptformsvue.js