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

RicardoCostaTW · February 26, 2013 at 10:39 PM

Boas Pessoal,

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

<label>
                           <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>
                                   <? }
                               }
                               ?>
                           </select>

                       </label>

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 February 27, 2013 at 05:22 PM by brunoais
geshi

NunoDinis · February 27, 2013 at 09:17 AM

Tens este plugin de jquery muito bom.

RicardoCostaTW · February 27, 2013 at 09:19 AM

mas isto é para implementar em wordpress, e acho que j query não funciona bem.. tentei esse plugin ontem :/

HappyHippyHippo · February 27, 2013 at 09:33 AM

mas isto é para implementar em wordpress,

não faço ideia de onde tiraste essa conclusão

e acho que j query não funciona bem.. tentei esse plugin ontem :/

http://designwithpc.com/Plugins/ddSlick#demo

RicardoCostaTW · February 27, 2013 at 09:43 AM

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

e o código que tem é:

<?php
/**
* 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(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
   <!--<![endif]-->
   <head>
       <meta charset="<?php bloginfo('charset'); ?>" />
       <meta name="viewport" content="width=device-width" />
       <title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title('|', true, 'right');
// Add the blog name.
bloginfo('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));
?></title>
       <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>
       <![endif]-->
       <?php
       /* 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'))
           wp_enqueue_script('comment-reply');
       /* 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.
        */
       wp_head();
       ?>
       <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>

       <?php
       $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];
               break;
           }
       }
       ?>
  </head>

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

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

                   <div id="menu_superior">
                       <?php
                       wp_nav_menu(array('menu' => 'menudireito', 'items_wrap' => '<div id="menuDireito"><div id="menu_right">%3$s</div></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>
   </select>

                       <script type="text/javascript">

                       $('#myDropdown').ddslick({
   onselected: function(selectedData){
       alert("ola");//callback function: do something with selectedData;
   }  
});
                       </script>

                   </div>
               </div> 
               <script>

                   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;

                   }

               </script>
               <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>
               </div>

               <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

NunoDinis · February 27, 2013 at 09:57 AM

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

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

<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>
</select>

Edited February 27, 2013 at 09:58 AM by NunoDinis

RicardoCostaTW · February 27, 2013 at 10:04 AM

eu queria era as imagens detro de cada option mesmo que fossem estaticas

NunoDinis · February 27, 2013 at 10:16 AM

Se é assim, aqui está: http://www.htmldrive.net/items/show/144/A-Drop-Down-with-Icon-CSS-and-jQuery.html

RicardoCostaTW · February 27, 2013 at 11:03 AM

Se é assim, aqui está: http://www.htmldrive.net/items/show/144/A-Drop-Down-with-Icon-CSS-and-jQuery.html

obrigado 🙂

Sign In

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

Recommended Posts

RicardoCostaTW

NunoDinis

RicardoCostaTW

HappyHippyHippo

RicardoCostaTW

NunoDinis

RicardoCostaTW

NunoDinis

RicardoCostaTW

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information