I struggle to format a classic HTML form dropdown menu that is populated using JavaScript

Hey everyone, I'm having an issue with styling a drop down menu that is populated by JavaScript. I've tried different things but nothing seems to be working. Any suggestions on how I can style the elements in the drop down?

<form action="" method="post">
    <div class="cddp">

<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Category</option>
</select>

&nbsp;
<select name='List2' onchange="getValue(this.value,this.form['List1'].value)">
<option selected >Subcategory</option>
</select>
</div>

This is the CSS being used:

.cddp{
    color: red;
}
javascripthtmlcss

Answer №1

Check out this easy sample code snippet: 

<!DOCTYPE html>
<html>
<head>
<style>
.cddp{
    color: red;
}
.cddp select{
    color: green;
}
</style>
<script>
function favBrowser()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text;
}
</script>
</head>

<body>
<form>
<div class="cddp">
Select your preferred browser:
<select id="myList" onchange="favBrowser()">
  <option></option>
  <option>Google Chrome</option>
  <option>Firefox</option>  
  <option>Internet Explorer</option>
  <option>Safari</option>
  <option>Opera</option>
</select>
</div>
<p>Your favorite web browser is: <input type="text" id="favorite" size="20"></p>
</form>
</body>

</html>

Answer №2

.parent-div will select the parent section of all your input elements. To specifically target input elements within this .parent-div section, you can use the space selector to target descendants:

.parent-div input {
    border: 1px solid blue;
}

View Demo on JSFiddle

Answer №3

To target the select element accurately in your CSS selector, you can use the following code in your example: 

.cddp select {
    color: red;
}

This code will specifically target any SELECT elements that are directly nested inside elements with the cddp class. Alternatively, you can also apply the class directly to the SELECT elements themselves.

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

PHP Form Submission: A Simple Guide

One scenario that I'm facing is using the submit button event to populate a field in my form with a value. However, now I'm having trouble getting the form to submit at the same time. Any suggestions on what I can do? Check out this link for mor ...

phpjqueryhtmljson

Update a variety of CSS properties simultaneously

Is it possible to change multiple CSS attributes of an element with just one line of code? Currently, if I want to alter various CSS attributes of an element, I have to write separate lines of code for each attribute. For instance: $("div#start").cli ...

javascriptjqueryhtmlcss

What distinctions can be made between Controlled and Uncontrolled Components when using react-hooks-form?

Trying out the React Hooks form, I came across some interesting concepts like controlled and uncontrolled forms. Controlled Form <form onSubmit={handleSubmit(onSubmit)}> <input name="firstName" ref={register({ required: true })} /> ...

javascriptreactjsreact-hook-form

Cancel your subscription to a PubNub channel when the unload event occurs

Currently, I am developing a multiplayer game in Angular utilizing the PubNub service along with the presence add-on. One of the challenges I am facing is detecting when a player unexpectedly leaves the game. This is crucial for sending notifications to o ...

javascriptangularjspubnub

Reset the dropdown menu in React by setting a disabled option as the default selection

One issue I'm facing is trying to reset some dependent dropdowns that are controlled by react state. The functionality works fine, except when the default option is set as disabled. I came across this code snippet in a fiddle from another stackoverfl ...

javascriptreactjs

Disabling iframe javascript timers when iframe is no longer in the user's view

Currently, I am working on a blog post that will showcase various HTML5/Javascript animations through multiple <iframe> sections. These animations utilize methods such as requestAnimationFrame() and/or setInterval(). Due to limitations within the blo ...

javascriptiframe

Can a Javascript file be concealed from view?

Imagine a scenario where the localhost root file is served an HTML file using the following code: app.get('/', (req, res) => res.sendfile('index.html')) Is it possible to include JavaScript files in the HTML document that are not a ...

javascripthtmlnode.jsexpress

Calling components may result in a race condition

I have integrated 2 components into my "App" that work together seamlessly. The first component is responsible for resolving the external IP address to a geographical location by making 2 axios.get calls and then passing them back to App.vue using emit. F ...

javascriptvue.jsasynchronousaxios

JavaScript Flash player for iPad

As many of us know, the iPad does not support Flash. However, I am curious if the iPad sends any specific error messages that can be captured using Javascript. I realize one method is to detect the iPad from the user agent string, but I am interested in w ...

javascriptiphoneipadmobile-safari

Background image loading gets delayed causing it to flicker

Instead of having separate files for different elements on my site, I decided to keep all the JavaScript in one large file called my_scripts.js. To speed up loading times, I defer the loading of this file using inline JavaScript and make sure it is the las ...

javascripthtmlcss

Vue allows you to easily generate child div elements within a parent

Having some issues creating a child div with Vue. The code is being placed correctly, but it's being stored as an array. <template> <div class="containers" v-bind:style="{ backgroundColor: pageStyle.backgroundColor, paddingLeft:'5%& ...

javascriptvue.jsvuex

Is there a way to create a curve that stays below the text and does not intersect with it?

I am attempting to center a text on a quadratic curve or line, as shown in the image below: https://i.stack.imgur.com/XH6Fw.png My current approach using ctx.fillText results in the text overlapping the curve. https://i.stack.imgur.com/ddwue.png Is ther ...

javascripthtml5-canvasquadratic-curve

The Uglify task in Grunt/NPM is having trouble with this particular line of JavaScript code

Whenever I execute grunt build, Uglify encounters a problem at this point: yz = d3.range(n).map(function() { return k.map(x -> x[1]); }), An error message is displayed: Warning: Uglification failed. Unexpected token: operator (->). I have recentl ...

javascriptnode.jsd3.js

Structuring React components - Incorporating a form within a modal

I am currently utilizing the react-bootstrap Modal, Form, and Button components. My goal is to have the button trigger the modal window containing a form. Once the form is filled out, clicking another button within the modal will validate the data and sen ...

javascriptreactjscomponents

Automatically generated list items are failing to react to the active class

I am facing an issue with two divs in my project. The first div uses the Bootstrap class list-group and is populated with a basic example provided by Bootstrap. The second div is supposed to be populated with list-group-items obtained from an AJAX GET requ ...

javascripttwitter-bootstrap

AngularJS encountered an unhandled syntax error

My current approach involves utilizing the code below to display data fetched from Parse API into a table using AngularJS and Bootstrap. However, the JavaScript section where I have defined the controller doesn't seem to be running as expected. Below ...

htmlcssnode.jsangularjstwitter-bootstrap

MUI Error: Unable to locate module - "Error: Unable to resolve 'moment' module"

Encountering numerous errors when attempting to utilize the date-picker feature from mui-x. Issue: Module not found - Error: Can't resolve 'moment' Problem locating '@mui/x-date-pickers/LocalizationProvider' Error: Module not fou ...

javascriptreactjsnpmmaterial-uinpm-install

What is the method for defining functions that accept two different object types in Typescript?

After encountering the same issue multiple times, I've decided it's time to address it: How can functions that accept two different object types be defined in Typescript? I've referred to https://www.typescriptlang.org/docs/handbook/unions ...

javascripttypescript

Tips for displaying ajax search results in Laravel views

My attempt to send a JSON response via AJAX to my Laravel view is not yielding any successful results. public function viewMasakanAjax(Request $request) { if($request->ajax()) { $alberMasakan = Masakan::where('alber_nama_masakan&ap ...

javascriptjqueryjsonajaxlaravel

Tips for utilizing a Three.js curve to guide the movement of a mesh along a specified path

Developing an animation, currently at this stage: http://jsfiddle.net/CoderX99/66b3j9wa/1/ Please avoid delving into the code, it's written in CoffeeScript and may not be beneficial for your mental well-being. Imagine a "nordic" landscape with ship ...

javascriptthree.jscoffeescript