Dropdown

  • Creatore Discussione Creatore Discussione Ikon
  • Data di inizio Data di inizio

Ikon

Utente Attivo
3 Dic 2021
36
1
8
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"style="text-decoration:none" id="navbarDropdown" role="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item active" href="ggggg.php"style="text-decoration:none">Action</a>
<a class="dropdown-item" href="#"style="text-decoration:none">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"style="text-decoration:none">Something else here</a>
</div>
</li>

Funziona ma su ipad e Apple contorna il dropdown quando si clicca
 

Allegati

  • Screenshot_20240409-211707.jpg
    Screenshot_20240409-211707.jpg
    28,5 KB · Visite: 979
Potrebbe dipendere dalla proprietà outline. Prova ad azzerare quella. È possibile anche che sia impostata nello specifico per lo stato :focus, quindi non so se puoi applicare direttamente uno style in linea sul tag o se devi definire una regola nello style incluso nella pagina. Fai qualche prova
 
Ho tolto la CNN

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item active" href="pro2.html">Action-pro2</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>

Questo è lo scritto di bootstrap 4 e poi in aggiunto ho scritto questo
</li>


Aggiunto.css
.nav-link dropdown-toggle,.dropdown-toggle{border:0px solid!}

.nav-link dropdown-toggle:hover,.nav-link dropdown-toggle:focus{border:0px solid!}
#navbarDropdown{border:0px solid;}
#navbarDropdown:hover{border:0px solid;}
#navbarDropdown:focus{border:0px solid;}

.dropdown-toggle:hover,.dropdown-toggle:focus{border0l:0px;}

Ma il risultato è uguale
 
E questo è con la variabile PHP
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" style="text-decoration:none"id="navbarDropdown" role="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<?php echo $output[2];?>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item active" href="pro2.html"style="text-decoration:none">Action-pro2</a>
<a class="dropdown-item" href="#"style="text-decoration:none">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"style="text-decoration:none">Something else here</a>
</div></li>
 
Aggiunto.css
.nav-link dropdown-toggle,.dropdown-toggle{border:0px solid!}

.nav-link dropdown-toggle:hover,.nav-link dropdown-toggle:focus{border:0px solid!}
#navbarDropdown{border:0px solid;}
#navbarDropdown:hover{border:0px solid;}
#navbarDropdown:focus{border:0px solid;}

.dropdown-toggle:hover,.dropdown-toggle:focus{border0l:0px;} quello che ho scritto
 
Non vorrei sembrare scortese ma ho risposto indicandoti una possibile soluzione. Vedo però, da ciò che hai postato, che non hai seguito le mie indicazioni.
Consiglio di (ri)leggere con più attenzione ciò che ho indicato e cercare di applicarlo. Fai quindi sapere se riesci a risolvere come indicato.
 
Stavo facendo un po' di prove dopo ti posto le eventuali soluzioni trovate
ho pensato di fare un contorno fianco quando schiaccio il tasto oppure giallo stavo provando il blu eliminato. Dopo ti posto le eventuali soluzioni trovate. Una mi sembra valida
 
Ho trovato una soluzione cambiando il dropdown, perché quello aveva il btn primary (anche se era stato tolto), questo invece no, anche se lo fa' anche lui sono riuscito a coprirlo con un border:

Questo è il dropdown
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1</a>
<div class="dropdown-menu">
<a class="dropdown-item active" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>


Il css aggiunto in modifica:
.dropdown-toggle:hover,.dropdown-toggle:focus{border:3px solid #898989;box-shadow:none;}
Però il Shadow non so se funziona
So solamente che copre bene, sui telefonini cinesi di Apple.

Questo era il codice vecchio che mi a permesso di individuare le posizioni sul vecchio botton da tenere presente che il blu che si vedeva era in trasparenza di Cira 2/3px per me era un box-shadow e comunque non copriva
.dropbtn:hover, .dropbtn:focus {
border: 10px solid #898989 ;box-shadow: 0 0 0 0;box-shadown:none;
}//bandiera

#navbarDropdown:hover, #navbarDropdown:focus{
border:3px solid #898989;box-shadow: 0 0 0 0;
box-shadow:none;
}
Poi se c'è qualche altra soluzione non saprei, io ho trovato questa.
Però per me era un box-shadow
 
Identifico il campo ma poi cambiando il dropdown l'ho seppellito con il border il primo non si poteva segnava.
Dovrebbe essere comunque un box-shadow perché è trasparente.
Comunque ho risolto cosi
 

Allegati

  • p1-2.jpg
    p1-2.jpg
    25,4 KB · Visite: 52
  • r1.jpg
    r1.jpg
    19,6 KB · Visite: 68
C'è anche btn btn default se hai suggerimenti anche per toglierlo in css le accetto. Io ripeto ho trovato tale soluzione
 
Sto facendo anche quello che dici tu dovrebbe avere tale codice

.bootstrap-select .dropdown-toggle:focus {
outline: none! important;
}
O
.dropdown-toggle:focus {
outline: none! important;
}
E forse anche questo

.yourdivname:focus {
box-shadow: none;
}
 
Difficile aiutarti senza vedere la pagina in azione.
Posta il link alla pagina se ti è possibile.
 
Ripeto con default rimane adesso riproverò anche senza, riproverò i codici che tra le altre cose mi sembrano esatto
 

Discussioni simili