how to change the style sheet of a page based on the option from the drop-down menu

css style select option dropdown
css style select option dropdown codepen
css style select option dropdown bootstrap
custom select dropdown css only
select option line-height css
select option css not working
select option font-family
select option css codepen

i'm creating a page which has an link with the external style sheet, now i created few more style sheets and added an drop-down menu in the page, now how to link these options with the external style sheets so that once the user selects an option from the drop-down menu, the style sheet of that page should totally get changed to the new style sheet...how can i do this?

<div style="float:right;padding:26px 0 0 0;color:#fff;"><select>
      <option>please select your choice</option>
<option value="one">green</option>
<option value="two">red</option>
</select>

</div> 

I have the drop-down as above..

    try this :)

1. give a id to your select box say(giveAId)
2. then in jquery function pass this id and apply a change function('this will notice the   the change made in your select box').
3. get it's value from option box 
4. then pass it to the link href like in this example


 <script type="text/javascript">
    $(function() {
        $("#giveAId").change(function(){ //2 step
           var stylesheet = $(this).val(); // 3 step
           $('link').attr('href',stylesheet+ '.css'); //4 step done here
          });
    });

 </script>


    <div  style="float:right;padding:26px 0 0 0;color:#fff;">
       <select id="giveAId"> // 1 step
          <option>please select your choice</option>
          <option value="one">green</option>
          <option value="two">red</option>
        </select>
    </div> 

Using a drop-down menu to change a stylesheet - CSS, for using a drop-down menu to change the external stylesheet my page uses? for "Javascript style switcher" should give you some options. When you run this code on any page within a WebKit-based browser it should change the appearance of the select box, remove standard OS-arrow and add a PNG-arrow, put some spacing before and after the label, almost anything you want. The most important part is appearance property, which changes how the element behaves.

You can give the user a cookie which remembers which style sheet they have chosen from the menu, and load the CSS for the page based on that cookie. Then just make it so the page refreshes on click, using AJAX if you want.

Dropdown Default Styling, Select (dropdown) menus are one that is particularly weird. Firefox, Opera, and IE will respect your change but again only if explicitly When you select an option it displays the custom styling again with the choice shown. Then there is (3) multiple dropdowns on 1 page (4) no z-index clashing with� Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens). Instead of using a border, we have used the CSS box-shadow property to make the dropdown menu look like a "card".

submit the form and use session/cookies to remember the selection

for example

$_SESSION['selected_stylesheet'] = $_POST['stylesheet'];

and then u should use the $_SESSION['selected_stylesheet'] when u calling the external css file

<link type="text/css" href="<? echo $_SESSION['selected_stylesheet'] ?>.css" rel="stylesheet" />

i think that will work

How to style a dropdown using CSS?, There are many ways to design <select> dropdown menu using CSS. It contains the CSS property to set the dropdown background color, text-color, font- size, cursor pointer etc. option value = "2" >Computer Networks</ option > See your article appearing on the GeeksforGeeks main page and help other Geeks. How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically by Christopher Heng, thesitewizard.com. It may be useful sometimes to provide your visitors with the option to change the appearance of your website. Perhaps you want to provide theme support for your site.

CSS Dropdowns, Create a dropdown box that appears when the user moves the mouse over an element. around the elements to position the dropdown content correctly with CSS. the dropdown content to be as wide as the dropdown button, set the width to Create a dropdown menu that allows the user to choose an option from a list:. Here’s a simple alternative to dropdown navigations at smaller screen sizes: Move the navigation from one of the first things to appear on the page to one of the last things to appear. Near the top of the page, place an image of a list icon that is anchored to the newly relocated navigation. A smooth page scroll is a must for this to work.

Overriding Default Page Style Properties, Select File, Definition Properties to access the Page Properties dialog box. Select the Use tab. Click the Page Background Style drop-down list box and select a style. Click the OK button and save the page. The first thing you need to do is open up your Google Sheets file and select the cell(s) for which you want to use a drop-down list. RELATED: 5 Google Sheets Features You Should Know. Next, open the “Data” menu and select the “Data Validation” command. From the Criteria drop-down, choose either “List From a Range” or “List of

Alternative Style: Working With Alternate Style Sheets – A List Apart, So you've got a web page. rel attribute is set to “stylesheet” and no title attribute is set. drop–down menu or tool bar will be provided. For example, to have the option to switch between two themes with titles “default” and “paul,” you could � Firstly, create a drop down list as you need, see screenshot: 2. Then right click the sheet tab contains the drop down you want to use, and then choose View Code from the context menu, and in the opened Microsoft Visual Basic for applications window, copy and paste the following code into the blank Module:

Comments
  • almost the same i was looking for can u please change this into an readable code and where u given the function to call from the select tag??
  • @abc123 is it fine ? tell me if i have to elaborate more :)
  • <script type="text/javascript"> $(function1() { $("#theme_changer").change(function2(){ var stylesheet = $(this).val(); $('link').attr('href="style1.css"','"stylesheet"'+ '.css'); }); }); </script> i tried like this but found no change in my theme???
  • $('link').attr('href="style1.css"','"stylesheet"'+ '.css'); with $('link').attr('href',stylesheet+ '.css'); and edit function1 to function only why are adding 1 and 2 to function...leave them at it is.....
  • just copy paste the code and u can change the select box id......and your css name should be what are putting in options value....
  • yes this gives me an another better idea thanks fr the help...is there any other way like u said using ajax we can change the style sheet...but how to load the style sheet into the page is my doubt in this case...
  • else is it possible to call the style sheets by giving the onChange function at the select box??
  • the idea is good but unfortunately i don't have anything in the page to submit and the $_POST method can not be used in my page....
  • but u can use javascript to detect the selected option. im just giving the rough idea on what have i done before in my previous project