online - IE6/IE7 borde css en el elemento seleccionado

internet explorer versiones

Question

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

Answer 1

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

<style>
div.select-container{
   border: 1px black;width:200px;
}
</style>


<div id="status" class="select-container">
    <select name="status">
        <option value="" >Please Select...</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
</div>

Answer 2

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

Answer 3

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

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

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

<select> 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 <select> 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 <select> hermosa ... y no tendrá que sacrificar la accesibilidad, facilidad de uso o degradación elegante.

El problema

Todos sabemos que <select> 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 <select> , es una parte importante del conjunto de herramientas de formularios actual; debemos abrazarlo. Dicho esto, algunos pensamientos creativos pueden mejorarlo.

El <select>

Usaremos un simple para nuestro ejemplo:

<select id="something" name="something">
  <option value="1">This is option 1</option>
  <option value="2">This is option 2</option>
  <option value="3">This is option 3</option>
  <option value="4">This is option 4</option>
  <option value="5">This is option 5</option>
</select>

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

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

A <select> como se representa en Windows XP / Firefox 1.0.2. http://v2.easy-designs.net/articles/replaceSelect/images/ffSelect.png

o esto

A <select> como se representa en Mac OSX / Safari 1.2. http://v2.easy-designs.net/articles/replaceSelect/images/safariSelect.png

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

Nuestro concepto de un <select> de estilo agradable. http://v2.easy-designs.net/articles/replaceSelect/images/desiredSelect.png

Entonces, ¿Cómo lo hacemos? Mantener el <select> 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 <select> 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 <select> .

Una <select> es, esencialmente, una lista desordenada de opciones en la que puede elegir un único valor para enviar junto con el resto de un formulario. Entonces, en esencia, es un <ul> en esteroides. Siguiendo con esa línea de pensamiento, podemos reemplazar el <select> con una lista desordenada, siempre que le proporcionemos alguna funcionalidad mejorada. Como <ul> 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 <select> cuando usamos un <ul> ?" 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 <ul> sienta como <select> , 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 <select> :

• 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 recopilar 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 <li>s
  for (var i=0; i<opts.length; i++) {
    var li = document.createElement(''li'');
    var txt = document.createTextNode(opts[i].text);
    li.appendChild(txt);
    ul.appendChild(li);
  }
  // add the ul to the form
  obj.parentNode.appendChild(ul);
}

Usted podría estar pensando "¿ahora qué sucede si ya hay una <option> seleccionada?" Podemos explicar esto agregando otro ciclo antes de crear los <li> s para buscar la <option> seleccionada, y luego almacenar ese valor para class nuestro <li> seleccionado como "seleccionado":

…
  var opts = obj.options;
  // check for the selected option (default to the first option)
  for (var i=0; i<opts.length; i++) {
    var selectedOpt;
    if (opts[i].selected) {
      selectedOpt = i;
      break; // we found the selected option, leave the loop
    } else {
      selectedOpt = 0;
    }
  }
  for (var i=0; i<opts.length; i++) {
    var li = document.createElement(''li'');
    var txt = document.createTextNode(opts[i].text);
    li.appendChild(txt);
    if (i == selectedOpt) {
      li.className = ''selected'';
    }
    ul.appendChild(li);
…

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

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

function setForm() {
  var s = document.getElementsByTagName(''select'');
  for (var i=0; i<s.length; i++) {
    selectReplacement(s[i]);
  }
}
window.onload = function() {
  setForm();
}

Estamos casi allí; agreguemos un poco de estilo.

Algunos CSS inteligentes

No sé ustedes, pero soy un gran admirador de los Suckerfish desplegables CSS (especialmente la variedad Suckerfish ). He estado trabajando con ellos desde hace un tiempo y finalmente me di cuenta de que un <select> 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- <select> ? 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 <ul> 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- <select> comporte como un <select> 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- <select> 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- <select> .

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

Como nos enseñó el Suckerfish original, IE no reconocerá un estado de desplazamiento sobre nada que no sea <a> , así que tenemos que dar cuenta de eso al aumentar algo de nuestro código con lo que hemos aprendido de ellos. Podemos adjuntar eventos onmouseover y onmouseout a la class "selectReplacement" -ed <ul> y sus <li> 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<opts.length; i++) {
    …
    if (i == selectedOpt) {
      li.className = ''selected'';
    }
    if (window.attachEvent) {
      li.onmouseover = function() {
        this.className += '' selHover'';
      }
      li.onmouseout = function() {
        this.className = 
          this.className.replace(new RegExp(" selHover//b"), '''');
      }
    }
  ul.appendChild(li);
}

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 <select> ; 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 <li> 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 <li>''s siblings
  var lis = obj.parentNode.getElementsByTagName(''li'');
  // loop through
  for (var i=0; i<lis.length; i++) {
    // not the selected <li>, remove selected class
    if (lis[i] != obj) {
      lis[i].className='''';
    } else { // our selected <li>, 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 <li> 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 <select> original (que será enviado junto con el formulario) cuando se hace clic en un <li> :

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

A continuación, podemos agregar estas funciones al evento onclick de nuestros <li> s:

…
  for (var i=0; i<opts.length; i++) {
    var li = document.createElement(''li'');
    var txt = document.createTextNode(opts[i].text);
    li.appendChild(txt);
    li.selIndex = opts[i].index;
    li.selectID = obj.id;
    li.onclick = function() {
      setVal(this.selectID, this.selIndex);
      selectMe(this);
    }
    if (i == selectedOpt) {
      li.className = ''selected'';
    }
    ul.appendChild(li);
  }
…

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 link a alguien que dice que no se puede hacer.

Answer 4

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 ...

Answer 5

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.

Answer 6

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/

Answer 7

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 anidados.

Answer 8

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<style type="text/css">
*{margin:0;padding:0;}
select {font: normal 13px Arial, SansSerif, Verdana; color: black;}
.wrapper{width:198px; position: relative;  height: 20px; overflow: hidden; border-top:1px solid #dddddd; border-left:1px solid #dddddd;}
.Select{color: black; background: #fff;position: absolute; width: 200px; top: -2px; left: -2px;}
optgroup{background-color:#0099CC;color:#ffffff;}
</style>
</head>

<body>
<div class="wrapper">
<select class="Select">
<optgroup label="WebDevelopment"></optgroup>
<option>ASP</option>
<option>PHP</option>
<option>ColdFusion</option>
<optgroup label="Web Design"></optgroup>
<option>Adobe Photoshop</option>
<option>DreamWeaver</option>
<option>CSS</option>
<option>Adobe Flash</option>
</select>
</div>
</body>
</html>

Sajay

Answer 9

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.

Answer 10

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

Answer 11

Solo agrega una declaración 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

Answer 12

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. niceforms embargo, puedes probar niceforms ;)

Answer 13

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

<meta http-equiv="X-UA-Compatible" content="IE=100" >

Answer 14

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);