Jump to content

Background-Image Select não trabalha em chrome e IE


Recommended Posts

Boas Pessoal,

Estou com uma dúvida que me anda a comer a cabeça! Tenho uma select box assim:

                           <select autofocus style="background: transparent; border: 0px;" id="linguas" name="linguas" onchange="selectLinguas()">
                               <option id ="pt" value="pt">Português</option> 
                               <?php for ($k = 1; $k < count($ativas); $k++) {
                                   if ($linguaAtiva == $ativas[$k]) {
                                       <option selected="selected" value="<?php echo ($ativas[$k]) ?>"><?php echo $linguas[$ativas[$k]]; ?></option> 
                                   <?php } else { ?>
                                       <option value="<?php echo ($ativas[$k]) ?>" ><?php echo $linguas[$ativas[$k]]; ?></option>
                                   <? }


e quero colocar em cada option uma mini imagem....

eu fiz o seguinte:

select#linguas option[value="pt"] {background-image: url(images/bandeiraPT.png) ; background-position:right; background-repeat:no-repeat;overflow:hidden;}

mas só funciona no Firefox... já dei voltas pela web e não sei como resolver a questão. Ajuda? 🙂

Edited by brunoais
Link to comment
Share on other sites

http://nutre.pictonio.pt/ É este site que tou a implementar a combobox....

e o código que tem é:

* The Header for our theme.
* Displays all of the <head> section and everything up till <div id="main">
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
       <meta charset="<?php bloginfo('charset'); ?>" />
       <meta name="viewport" content="width=device-width" />
* Print the <title> tag based on what is being viewed.
global $page, $paged;
wp_title('|', true, 'right');
// Add the blog name.
// Add the blog description for the home/front page.
$site_description = get_bloginfo('description', 'display');
if ($site_description && ( is_home() || is_front_page() ))
   echo " | $site_description";
// Add a page number if necessary:
if ($paged >= 2 || $page >= 2)
   echo ' | ' . sprintf(__('Page %s', 'twentyeleven'), max($paged, $page));
       <link rel="shortcut icon" href="<?php echo home_url(); ?>/images/favicon.ico" />
       <link rel="profile" href="http://gmpg.org/xfn/11" />
       <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
       <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
       <!--[if lt IE 9]>
       <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
       /* We add some Javascript to pages with the comment form
        * to support sites with threaded comments (when in use).
       if (is_singular() && get_option('thread_comments'))
       /* Always have wp_head() just before the closing </head>
        * tag of your theme, or you will break many plugins, which
        * generally use this hook to add elements to <head> such
        * as styles, scripts, and meta tags.
       <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico">
       <script type="text/javascript" src="http://dl.dropbox.com/u/40036711/Scripts/ddslick.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

       $ativas = get_option('qtranslate_enabled_languages');
       $linguas = get_option(qtranslate_language_names);
       function linguas($language) {
           $url = home_url() . "?page_id=" . get_the_ID() . "〈=" . $language;
           return $url;
       $url = get_page_link(get_the_ID());
       $linguaAtiva = "pt";
       $url = get_page_link(get_the_ID());
       $iniciaisLinguas = get_option(qtranslate_enabled_languages);
       for ($k = 0; $k < count($iniciaisLinguas); $k++) {
           $findme = 'lang=' . $iniciaisLinguas[$k];
           if ($condition = strpos($url, $findme) == true) {
               $linguaAtiva = $iniciaisLinguas[$k];

   <body <?php body_class(); ?>>
       <div id="page" class="hfeed">

           <header id="branding" role="banner">
               <div id="reservado">

                   <div id="menu_superior">
                       wp_nav_menu(array('menu' => 'menudireito', 'items_wrap' => '<div id="menuDireito"><div id="menu_right">%3$s</div></div>'));

                   <div id="liguasSelect">

                   <select id="demo-htmlselect">
       <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
           data-description="Description with Facebook">Facebook</option>
       <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
           data-description="Description with Twitter">Twitter</option>
       <option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
           data-description="Description with LinkedIn">LinkedIn</option>
       <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
           data-description="Description with Foursquare">Foursquare</option>

                       <script type="text/javascript">

   onselected: function(selectedData){
       alert("ola");//callback function: do something with selectedData;


                   function selectLinguas(){

                       var e = document.getElementById("linguas");

                       var strUser = e.options[e.selectedIndex].value;

                       var link ="<?php home_url(); ?>/?page_id=<?php echo get_the_ID(); ?>";

                       window.location = link+"〈="+strUser;


               <div id="logoNutre">
                   <a href="<?php bloginfo('url') . "?lang=" . $linguaAtiva; ?>"><img src="<?php bloginfo('template_directory'); ?>/images/nutre.jpg" border="0" alt="" width="155px" height="80px" /></a>

               <nav id="access" role="navigation">
                   <h3 class="assistive-text"><?php _e('Main menu', 'twentyeleven'); ?></h3>
                   <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                   <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e('Skip to primary content', 'twentyeleven'); ?>"><?php _e('Skip to primary content', 'twentyeleven'); ?></a></div>
                   <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e('Skip to secondary content', 'twentyeleven'); ?>"><?php _e('Skip to secondary content', 'twentyeleven'); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
               </nav><!-- #access -->

           </header><!-- #branding -->
           <!--       <div id="main">-->

estou a fazer alguma coisa mal?

estou mesm um bocado desesperado com isto porque preciso de ter as bandeiras ao lado das linguas :X ate hoje

Link to comment
Share on other sites

Este script consoante a escolha já te dá uma imagem. Não sei é como meter dentro da dropdown..

function changeImage(o) {
if (o.value != "")
 document.getElementById('changeMe').src = o.value; }

<img id="changeMe" src=""/>
<select onchange="changeImage(this)">
<option value="">Select image</option>
<option value="images/add.png">Portugal</option>
<option value="images/cancel.png">Espanha</option>
Edited by NunoDinis

Estranha forma de vida que tem a capacidade de transformar comandos em mensagens de erro.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.