¿Como dar estilo al primer ítem seleccionado desde un Combobox con Vuetify?

Buen día comunidad les comento, estoy intentando agregar un estilo al primer ítem que se selecciona a través de un Combobox Component usando Vuetify, recordando que siempre y cuando los demás items mantengan sus estilos, solo se dará estilo al primer ítem que se selecciona, y resaltando que no importa el orden que se selecciona los items, siempre se dará un estilo al primer ítem seleccionado.

Llevo un avance en lo cual, solo realizó modificaciones de estilos usando solo CSS, pero tengo un poco el conocimiento que también interviene Javascript para obtener el primer ítem, hasta ahora no tengo idea de como lograr eso.

Muestro la imagen, donde espero aplicar la solución: Avance del problema

Como se aprecia, a través de CSS logro dar estilos a los items, pero no es lo que espero, porque aplica estilos a todo los items seleccionados.

Muestro el fragmento de código de la estructura del Componente Combobox:

<v-combobox    class="specialitySelect"    v-model="speciality"    :items="especialidad_items"    suffix="Especialidad"    menu-props="auto"    color="deep-purple darken-1"    multiple    single-line    hide-details    chips    box    ></v-combobox> 

Código CSS para dar estilos a los items del Lista de especialidades:

.v-menu__content .v-select-list .v-list .v-list__tile--active:first-child {   background: yellow; } 

Espero de su grata ayuda.

¿Es posible tener una passwor del mismo estilo que con Jframe pero en java osea por consola?

Estoy haciendo un formulario, en teoría era en Swing pero he teneido problemas con el serializa y deserializa y he decidio hacerlo sin Swing ya que no era obligatorio. Entonces mi preguta es, es posible tener algo como el Password de Jframe osea que cuando tu metas la clave por consola salga astericos o cosas del estilo? os dejo mi clase Persona para que os hagais una idea aunque no es necesario

Public class Persona implements Serializable {      private String usuario;     private String password;     private int edad;     private int telefono;     private static final long serialVersionUID = 2L;      public Persona() {         this.usuario = "";         this.password = "";         setEdad(edad);         setTelefono(telefono);     }      public Persona(String usuario, String password, int edad, int telefono) {         this.usuario = usuario;         this.password = password;         this.edad = edad;         this.telefono = telefono;     }      public String getUsuario() {         return usuario;     }      public void setUsuario(String usuario) {         this.usuario = usuario;     }      public String getPassword() {         return password;     }      public void setPassword(String password) {         this.password = password;     }      public int getEdad() {         return edad;     }      public void setEdad(int edad) {         if (this.edad < 110) {             this.edad = edad;         }     }      public int getTelefono() {         return telefono;     }      public void setTelefono(int telefono) {         if (Integer.toString(telefono).length() == 9) {             this.telefono = telefono;         }     }  } 

Manejar locations con Nginx estilo Apache

les cuento que hace poco me muevo de Apache a NGINX y pues me entero que la forma en que manejan las URL es un poco diferente, debido a que debo corregir eso en brevedad, podria alguien mostrarme como hacer urls como estas en en el server block:

miweb.com/nombredelscript (Sin extension) miweb.com/un-titulo-web (que ejecute, por ejemplo: script2.php?titulo=$  1) miweb.com/trabajos/titulo-de-trabajo (que ejecute, por ejemplo: works.php?id=$  1) 

lo he intentado y no lo logro.

¿como leer una hoja de estilo cada vez que el usuario hace un request, aunque no haya sido modificada?

Tengo una página que acepta colores en un un modelo de una BD, la hoja de estilo lee los colores introducidos por el usuario correctamente sólo la primera vez, cuando el usuario modifica un color una segunda vez ya no toma los cambios, cuando modifico manualmente la hoja de estilo es que se actualizan los nuevos colores en la hoja de estilo y necesito que cada vez que haga un request, verifique si hubo un cambio en el modelo de colores y los actualice en la página o si es muy complicado, que actualice esa hoja de estilo cada vez que se haga un request por parte del usuario, hasta ahora he probado desactivar todos los caches que he encontrado y no funcionan, se que no es la mejor práctica pero incluso con este extremo tampoco funciona.

config.action_controller.perform_caching = false config.action_dispatch.rack_cache =  nil config.middleware.delete Rack::Cache config.assets.debug = true config.assets.compress = false config.cache_classes = false 

Básicamente lo que mínimo quiero/necesito es:

¿Cómo actualizar la hoja de estilo cada vez que el usuario hace un request?

¿Como puedo saber cuando le cambia el estilo a un elemento?

Hola tengo un gif que se muestra durante ciertas peticiones del ajax lo muestro con el .show() y lo oculto con el hide() hasta ahi todo normal, y tengo una función que se encarga de de arrojar una alerta si el tiempo durante el que se muestra el gif excede lo normal del tiempo,

esta es la función

    var totalTiempo=5;  function updateReloj(){      if(totalTiempo==0){     $  ('#LoadingImage').hide();     alert("Excede el tiempo");      }else if($  ('#LoadingImage').is(':visible')){         /* Restamos un segundo al tiempo restante */         totalTiempo-=1;         /* Ejecutamos nuevamente la función al pasar 1000 milisegundos (1 segundo) */         setTimeout("updateReloj()",1000);     };  }; 

este funciona normal ahora mi problema es el siguiente me gustaria saber si hay alguna manera de que se detecte cuando el LoadingImage cambia su estilo de hide a show y viceversa probé con estos métodos

if($  ('#LoadingImage').is(':visible')){       //Cambio a visible        updateReloj();   }; 

pero que pasa ese codigo lo tendria que poner despues de un show para que funcione entonces pense en poner un Change, pero este no me dectecta cuando cambia el LoadingImage de show() a hide() y viceversa y no se como hacer para que el change detecte eso.

si bien es cierto que puedo poner una llamada de la función después de cada show para mi seria mucho mejor un change del LoadingImage

¿Cómo puedo obtener un multi color linear-gradient en un solo estilo?

Tengo el siguiente color de fondo pero tengo que ir escalando entre el body -> <div class="background"> y <div class="container"> para obtener este resultado:

@import 'https://fonts.googleapis.com/css?family=Lato:300';  html, body, .background { 	width: 100%; 	height: 100%; 	margin: 0; 	padding: 0; 	font-family: 'Lato', sans-serif; 	background: white; }  body { 	background: linear-gradient(0deg, rgba(0, 0, 200, 0.6) , rgba(0, 0, 200, 0) ); }  .background { 	background: linear-gradient(120deg, rgba(50, 150, 100, 0.6) , rgba(0, 0, 100, 0) ); }  .container { 	background: linear-gradient(240deg, rgba(150, 50, 50, 0.6) , rgba(0, 0, 200, 0) ); 	     display: flex; 	flex-direction: column;     align-items: center;   	justify-content: center; 	margin: 0; 	padding: 0; 	height: 100%; 	width: 100%; }  h1 { 	color: white; 	font-weight: 100; }
<div class="background"> 	<div class="container"> 		<h1>hello</h1> 	</div> </div>

Cómo puedo obtener ese mismo color de fondo en una solo estilo es decir tener ese fondo en un solo contenedor, en un solo div u otro sin que tenga que agregar a otros elementos para poder obtener el mismo resultado.

Estilo não está sendo atualizado após chamar hook

Quero que o estilo do meu botão mude sempre que a propriedade isHoveringSendButton ou a theme.primaryColor mudar de valor. Criei um estado para minha variável de estilo chamada themeButtonStyle, e ela funciona bem, sempre atualiza certo e etc.

O problema é que quando ela é atualizada, não está renderizando novamente, ou seja, o estilo do botão está ficando sempre com seu estado atual.

export default () => {     const theme = useContext(Theme);      const [isHoveringSendButton, setIsHoveringSendButton] = useState(false);     const [themeButtonStyle, setThemeButtonStyle] = useState({});      useEffect(() => {         setThemeButtonStyle({             backgroundColor: isHoveringSendButton ? `lighten($  {theme.primaryColor}, 50%)` : theme.primaryColor         });     }, [isHoveringSendButton, theme.primaryColor]);      return (         <div>             <input type="text" />             <button style={themeButtonStyle}                 onMouseEnter={() => setIsHoveringSendButton(true)} onMouseLeave={() => setIsHoveringSendButton(false)}>                 Enviar             </button>         </div>     ); } 

O que eu posso estar fazendo errado?

CSS Error de inline-Block no se mantiene el estilo

tengo el código mostrado abajo que me muestra el buscador de bodega mostrado en la imagen(ejemplo 1), sin embargo cuando traigo los con un ciclo for de php pierde el estilo y queda como el mostrado en la imagen(ejemplo 2)… Que puedo hacer para volver a dejarlo como cuando no uso php?

introducir la descripción de la imagen aquí

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="row-fluid cuadro_buscar_buscar" style="margin: 0px; padding:0px; margin-top:30px;">     <center>  		<div style=" width:800px; margin-bottom:10px;">                 		 <table border="0">               <tr class="sin_fondo">               	<td style="width: 33%;"><div style="display: inline-block;"><a class="btn btn-md btn-primary" style=" margin:0px; border-bottom-left-radius:2px; border-top-left-radius:2px; margin-left: 0px; margin-right: 0px; width: 90px; margin-top:0px; font-size: 12px; margin-bottom:0px;background-color:#28b779"> BODEGA</a><select type="text" style=" margin:0px; width:51%; -webkit-appearance: none; -moz-appearance : none; border: 1px solid #28b779; margin-left: 0px; margin-right: 0px; border-bottom-right-radius:2px; border-top-right-radius:2px; border-bottom-left-radius:0px;  border-top-left-radius:0px; margin-bottom:0px; text-align:center;" name="buscar_bodega" id="buscar_bodega" onchange="buscador();">                 <?php  						for ($  i=0 ; $  i < count($  bodegas); $  i++) {	  								echo '<option value="'.$  bodegas[$  i]['idBodega'].'">'.$  bodegas[$  i]['nombre'].'</option>'; 						}?>                 </select></div></td>                  <td style="width: 33%;"><div style="display: inline-block;"><a class="btn btn-md btn-primary" style=" margin:0px; border-bottom-left-radius:2px; border-top-left-radius:2px; margin-left: 0px; margin-right: 0px; width: 90px; margin-top:0px; font-size: 12px; margin-bottom:0px;background-color:#28b779"> CATEGORÍA</a><select type="text" style=" margin:0px; width:51%; -webkit-appearance: none; -moz-appearance : none; border: 1px solid #28b779; margin-left: 0px; margin-right: 0px; border-bottom-right-radius:2px; border-top-right-radius:2px; border-bottom-left-radius:0px;  border-top-left-radius:0px; margin-bottom:0px; text-align:center;" name="buscar_categoria" id="buscar_categoria" onchange="buscador();">                 	<option value="nada">Todos</option>                 	<option value="0">Indumentaria</option>                     <option value="1">Insumos</option>                     <option value="2">Materiales de entrenamiento</option>                     <option value="3">Otros</option>                 </select></div></td>              	<td style="width:34%;"><input name="buscar_nombre" type="text" style="width:96%; background-color:white; border: 2px solid #28b779; border-radius:2px; margin-bottom:0px;" placeholder="Buscar producto" maxlength="149" id="buscar_nombre" onKeyUp="buscador();" ></td>                 <td style="width:40px; cursor:pointer;"> <button class="boton_refresh" onClick="buscador();" style="margin-left:10px;"><i class="icon-refresh"></i></button></td>                  <td style="width:40px; cursor:pointer;"> <button class="boton_refresh" onClick="buscador();" style="margin-left:10px;"><i class="icon-refresh"></i></button></td>               </tr>             </table>           	           </div>               <br>              <div style="margin:0px; height:20px;"><img src="img/cargando_buscar.gif" id="cargando_buscar" style=" display:none;">              	<span style="color:#dc4e4e; display:none;" id="error_conexion"><b>Error:</b> conexión a internet deficiente.</span>              	<span style="color:#28b779; display:none;" id="sin_resultados">Busqueda sin resultados.</span>              </div>              <br>      </center>  </div>