Add flag image to select option

后端未结

关注

 1  1490

深忆病人 2021-01-15 03:48

Good day! Im a newbie. Im trying to add image in the option tag in the select. but when i run the code. It doesnt show the image. can someone help me? thank you

This

1条回答

旧巷少年郎 (楼主)

2021-01-15 04:25
It's Difficult to Customize and tags are difficult to customize and anything that holds true for one browser is never true for the rest of them.

Solution
- Forget about customizing ^✱ using
  and
~~and~~

&

^✱The pseudo- and tags. More importantly, it can store and process a value, and it can be registered to the change event.

Demo

Details are commented in demo

/*| For Demonstration Purposes
This is a test to prove that this pseudo- by logging the value of the selected pseudo-

html,
body {
  font: 400 small-caps 16px/1.25 Arial;
}

fieldset {
  width: fit-content;
  padding: 0;
}

legend {
  font-size: 1rem
}

details {
  width: 150px;
  cursor: pointer;
  margin: 0 4px -5px 0;
  padding: 0 0 0 10px;
}

summary {
  position: relative;
  width: 96%;
  outline: 0.5px ridge grey;
}


/*
Hides 's default arrow
*/

details summary::-webkit-details-marker {
  visibility: hidden;
  position: absolute;
  z-index: -1;
}


/*| Pseudo- all  are visible.
=============================================
2. if  then the 
    that proceeds the radio button is visible.
*/

[open] .opt,
.rad:checked+.opt {
  display: block;
}

/*| For Demonstration Purposes
This ruleset changes how the console is displayed.
*/

.as-console-wrapper {
  width: 50%;
  min-height: 100%;
  margin-left: 50%;
  font-variant: normal;
}

.as-console-row.as-console-row::after {
  content: '';
  padding: 0;
  margin: 0;
  border: 0;
  width: 0;
}





  
  Custom select box Jquery Plugin by VJ
  
  



  



 
  
    Country


    
     





  
  
      ╍╍╍╍╍╍╍╍╍
  

  
  
      
     
    United States
  

  
  
      
     
    Great Britain
  

  
  
      
    
    India
  

  
  
      
    
    Nepal

0 讨论(0)

Add flag image to select option

It's Difficult to Customize & Tags and tags are difficult to customize and anything that holds true for one browser is never true for the rest of them.

Solution

& Forget about customizing , create a pseudo-✱ using and

&

Demo

It's Difficult to Customize and tags are difficult to customize and anything that holds true for one browser is never true for the rest of them.

and