IE6 / IE7 borde css en el elemento seleccionado

¿Alguien tiene una solución para diseñar los bordes de elementos “selectos” en Internet Explorer usando CSS?

Hasta donde yo sé, no es posible en IE porque usa el componente OS.

Aquí hay un enlace donde se reemplaza el control, pero no sé si eso es lo que quieres hacer.

Editar: el enlace está roto, estoy volcando el contenido

Algo nuevo, parte 1

Por Aaron Gustafson

Por lo tanto, ha creado un sitio hermoso y compatible con los estándares que utiliza las últimas y mejores técnicas de CSS. Has dominado el control del diseño de cada elemento, pero en el fondo de tu mente, una pequeña voz te molesta por lo feo que son tus s. Bueno, hoy vamos a explorar una forma de silenciar esa pequeña voz y completar nuestros diseños. Con un poco de secuencias de comandos DOM y CSS creativo, usted también puede hacer que su hermosa … y no tendrá que sacrificar la accesibilidad, facilidad de uso o degradación elegante.

El problema

Todos sabemos que es simplemente feo. De hecho, muchos intentan limitar su uso para evitar su web clásica alrededor de los bordes de 1994. Sin embargo, no deberíamos evitar usar , es una parte importante del conjunto de herramientas de formularios actual; debemos abrazarlo. Dicho esto, algunos pensamientos creativos pueden mejorarlo.

El

Usaremos un simple para nuestro ejemplo:

  

[Nota: se implica que este está en el contexto de un formulario completo.]

Entonces tenemos cinco dentro de un . Este tiene un id de “algo” asignado de forma exclusiva. Dependiendo del navegador / plataforma en el que lo esté viendo, es probable que su tenga el siguiente aspecto:

A

o esto

A

Digamos que queremos que se vea un poco más moderno, quizás así:

Nuestro concepto de un

Entonces, ¿Cómo lo hacemos? Mantener el básico no es una opción. Además de los ajustes básicos de color de fondo, fuente y color, no tienes mucho control sobre el.

Sin embargo, podemos imitar la excelente funcionalidad de un en un nuevo control de formulario sin sacrificar la semántica, la usabilidad o la accesibilidad. Para hacer eso, necesitamos examinar la naturaleza de un .

Una es, esencialmente, una lista desordenada de opciones en la que puede elegir un único valor para enviar junto con el rest de un formulario. Entonces, en esencia, es un

    en esteroides. Siguiendo con esa línea de pensamiento, podemos reemplazar el con una lista desordenada, siempre que le proporcionemos alguna funcionalidad mejorada. Como

      s se puede diseñar de muchas formas diferentes, estamos casi en casa. Ahora las preguntas se convierten en “cómo garantizar que mantenemos la funcionalidad de cuando usamos un

        ?” En otras palabras, ¿cómo enviamos el valor correcto junto con el formulario si ya no usamos un control de formulario?

        La solución

        Ingresa el DOM. El último paso en el proceso es hacer que la función

          sienta como , y podemos lograr eso con JavaScript / ECMA Script y un poco de CSS inteligente. Aquí está la lista básica de requisitos que necesitamos para tener un faux :

          • haga clic en la lista para abrirlo,
          • haga clic en la lista de elementos para cambiar el valor asignado y cierre la lista,
          • mostrar el valor predeterminado cuando no se selecciona nada, y
          • mostrar el elemento de la lista elegida cuando se selecciona algo.

          Con este plan, podemos comenzar a abordar cada parte en sucesión.

          Construyendo la lista

          Entonces, primero debemos recostackr todos los atributos ys de y reconstruirlo como a. Logramos esto ejecutando el siguiente JS:

           function selectReplacement(obj) { var ul = document.createElement('ul'); ul.className = 'selectReplacement'; // collect our object's options var opts = obj.options; // iterate through them, creating 
        • s for (var i=0; i
        • Usted podría estar pensando "¿ahora qué sucede si ya hay una seleccionada?" Podemos explicar esto agregando otro ciclo antes de crear los

        • s para buscar la seleccionada, y luego almacenar ese valor para class nuestro

        • seleccionado como "seleccionado":

           … var opts = obj.options; // check for the selected option (default to the first option) for (var i=0; i 

          [Nota: de aquí en adelante, se seleccionará la opción 5 para demostrar esta funcionalidad.]

          Ahora, podemos ejecutar esta función en cada en la página (en nuestro caso, uno) con lo siguiente:

           function setForm() { var s = document.getElementsByTagName('select'); for (var i=0; i 

          Estamos casi allí; agreguemos un poco de estilo.

          Algunos CSS inteligentes

          No sé ustedes, pero soy un gran admirador de los menús desplegables CSS (especialmente la variedad Suckerfish ). He estado trabajando con ellos desde hace un tiempo y finalmente me di cuenta de que un es más o menos como un menú desplegable, aunque con un poco más bajo el capó. ¿Por qué no aplicar la misma teoría estilística a nuestro falso- ? El estilo básico es algo como esto:

           ul.selectReplacement { margin: 0; padding: 0; height: 1.65em; width: 300px; } ul.selectReplacement li { background: #cf5a5a; color: #fff; cursor: pointer; display: none; font-size: 11px; line-height: 1.7em; list-style: none; margin: 0; padding: 1px 12px; width: 276px; } ul.selectOpen li { display: block; } ul.selectOpen li:hover { background: #9e0000; color: #fff; } 

          Ahora, para manejar el elemento de la lista "seleccionada", necesitamos obtener un poco más astuto:

           ul.selectOpen li { display: block; } ul.selectReplacement li.selected { color: #fff; display: block; } ul.selectOpen li.selected { background: #9e0000; display: block; } ul.selectOpen li:hover, ul.selectOpen li.selected:hover { background: #9e0000; color: #fff; } 

          Tenga en cuenta que no estamos utilizando la pseudoclave: hover para

            para abrirla, sino que la estamos class como "selectOpen". La razón de esto es doble:

            1. CSS es para presentación, no para comportamiento; y
            2. queremos que nuestro faux- comporte como un real, necesitamos que la lista se abra en un evento onclick y no en un simple mouse-over.

            Para implementar esto, podemos tomar lo que aprendimos de Suckerfish y aplicarlo a nuestro propio JavaScript asignando y eliminando dinámicamente esta class en events for the list items. To do this right, we will need the ability to change the `` onclick events for the list items. To do this right, we will need the ability to change the events for the list items. To do this right, we will need the ability to change the eventos onclick` para cada elemento de la lista sobre la marcha para alternar entre las dos acciones siguientes:

            1. mostrar el falso completo- al hacer clic en la opción seleccionada / predeterminada cuando la lista está contraída; y
            2. "seleccionar" un elemento de la lista cuando se hace clic y contraer el faux- .

            Crearemos una función llamada selectMe() para manejar la reasignación de la class "seleccionada", la reasignación de los eventos onclick para los elementos de la lista, y el colapso de la falsa- :

            Como nos enseñó el Suckerfish original, IE no reconocerá un estado de desplazamiento sobre nada que no sea , así que tenemos que dar cuenta de eso al boost algo de nuestro código con lo que hemos aprendido de ellos. Podemos adjuntar eventos onmouseover y onmouseout a la class "selectReplacement" -ed

              y sus

            • s:

               function selectReplacement(obj) { … // create list for styling var ul = document.createElement('ul'); ul.className = 'selectReplacement'; if (window.attachEvent) { ul.onmouseover = function() { ul.className += ' selHover'; } ul.onmouseout = function() { ul.className = ul.className.replace(new RegExp(" selHover\\b"), ''); } } … for (var i=0; i 

              Entonces, podemos modificar algunos selectores en el CSS, para manejar el vuelo estacionario para IE:

               ul.selectReplacement:hover li, ul.selectOpen li { display: block; } ul.selectReplacement li.selected { color: #fff; display: block; } ul.selectReplacement:hover li.selected**, ul.selectOpen li.selected** { background: #9e0000; display: block; } ul.selectReplacement li:hover, ul.selectReplacement li.selectOpen, ul.selectReplacement li.selected:hover { background: #9e0000; color: #fff; cursor: pointer; } 

              Ahora tenemos una lista que se comporta como ; pero aún necesitamos un medio para cambiar el elemento de la lista seleccionada y actualizar el valor del elemento de formulario asociado.

              JavaScript fu

              Ya tenemos una class "seleccionada" que podemos aplicar a nuestro elemento de lista seleccionado, pero necesitamos una forma de aplicarla a un

            • cuando se haga clic en ella y eliminarla de cualquiera de sus hermanos "seleccionados" previamente. Aquí está el JS para lograr esto:

               function selectMe(obj) { // get the 
            • 's siblings var lis = obj.parentNode.getElementsByTagName('li'); // loop through for (var i=0; i, remove selected class if (lis[i] != obj) { lis[i].className=''; } else { // our selected
            • , add selected class lis[i].className='selected'; } } }
            • [Nota: podemos utilizar la asignación y el vaciado simples de className porque tenemos el control completo de los

            • s. Si (por alguna razón) necesita asignar clases adicionales a sus elementos de la lista, le recomiendo modificar el código para agregar y eliminar la clase "seleccionada" a su propiedad className .]

              Finalmente, agregamos una pequeña función para establecer el valor del original (que será enviado junto con el formulario) cuando se hace clic en un

            • :

               function setVal(objID, selIndex) { var obj = document.getElementById(objID); obj.selectedIndex = selIndex; } 

              A continuación, podemos agregar estas funciones al evento onclick de nuestros

            • s:

               … for (var i=0; i 

              Ahí tienes. Hemos creado nuestro faux funcional . As we have not hidden the original . As we have not hidden the original yet, we can [watch how it behaves](files/4.html) as we choose different options from our faux- . Of course, in the final version, we don't want the original . Of course, in the final version, we don't want the original to show, so we can hide it by clasificándolo como "reemplazado", y agregando eso al JS aquí:

               function selectReplacement(obj) { // append a class to the select obj.className += ' replaced'; // create list for styling var ul = document.createElement('ul'); … 

              A continuación, agregue una nueva regla de CSS para ocultar el

               select.replaced { display: none; } 

              Con la aplicación de algunas imágenes para finalizar el diseño (enlace no disponible), ¡estamos listos para continuar!


              Y aquí hay otro enlace a alguien que dice que no se puede hacer.

              extrapolarlo! 🙂

                filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000); 

              Desde mi experiencia personal, donde tratamos de poner el borde rojo cuando se seleccionó una entrada no válida, es imposible poner el borde rojo del elemento seleccionado en IE.

              Como se dijo antes, los controles de Internet Explorer usan WindowsAPI para dibujar y renderizar y no tiene nada que resolver.

              Cuál fue nuestra solución fue poner el color de fondo del elemento seleccionado en rojo claro (para que el texto sea legible). el color de fondo funcionaba en todos los navegadores, pero en IE teníamos efectos secundarios que el elemento tenía el mismo color de fondo que el seleccionado.

              Entonces, para resumir la solución que pusimos:

               select { background-color:light-red; border: 2px solid red; } option { background-color:white; } 

              Tenga en cuenta que el color se estableció con el código hexadecimal, simplemente no recuerdo cuál.

              Esta solución nos daba el efecto deseado en todos los navegadores, excepto en el borde rojo en IE.

              Buena suerte

              estaba teniendo el mismo problema con, es decir, luego inserté esta etiqueta meta y me permitió editar los bordes en, es decir,

                

              Usar SOLO css es impossbile. De hecho, todos los elementos de formulario son imposibles de personalizar para que se vean de la misma manera en todos los navegadores solo con css. Sin embargo, puedes probar niceforms 😉

              IE <8 no representa la lista desplegable en sí, solo utiliza el control de Windows que no se puede diseñar de esta manera. A partir de IE 8 esto ha cambiado y ahora se aplica el estilo. Por supuesto, su cuota de mercado es bastante insignificante aún.

              He solucionado la incapacidad de poner un borde en la selección en IE7 (IE8 en modo compatibilidad)

              Al darle un borde y un relleno, parece algo …

              No todo, pero es comienzo …

              Mira este código … espero que estés feliz 🙂

               < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    Untitled Document    

              Sajay

              La propiedad de estilo de borde es un comando abreviado para definir los estilos de borde de todos los lados un elemento html. Cada lado puede tener un estilo diferente.

              http://www.handycss.com/tips/styling-borders-with-css/

              Necesitará un cuadro de selección de diseño personalizado con CSS y JavaScript. Debería asegurarse de que se degrada completamente a un elemento de selección estándar si un usuario tiene JavaScript desactivado.

              OMI, no vale la pena el esfuerzo. Quédese con los estilos de fuente dentro de la selección para que se acerque al diseño de su sitio; deja los bordes, etc., a los elementos del cuadro.

              Para hacer un borde a un lado de un seleccionar en IE use los filtros de IE:

              select.required {border-left: 2px solid red; filter: progid: DXImageTransform.Microsoft.dropshadow (OffX = -2, OffY = 0, color = # FF0000)}

              Puse un borde en un lado solamente de todas mis entradas para el estado requerido.

              Probablemente hay un efecto que hace un mejor trabajo para un borde completo …

              http://msdn.microsoft.com/en-us/library/ms532853(v=VS.85).aspx

              Solo agrega una statement de tipo de documento antes de la etiqueta html

              ej .: < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

              Funcionará también en archivos JSP. Para más información: Declaración de Doctype HTML

              ¡¡¡Funciona!!! Usa el siguiente código:

                

              Me lo resuelve, para mis propósitos:

               .select-container { position:relative; width:200px; height:18px; overflow:hidden; border:1px solid white !important } .select-container select { position:relative; left:-2px; top:-2px } 

              Para poner más estilo será necesario usar divs nesteds.