Bonjour,
J'ai un problème avec un select, je souhaite que celui-ci soit de ce style là : https://jsfiddle.net/KyleMit/9abm0hhy/
j'ai deux page, une page qui est ma page de connexion et ma deuxième qui est une page modale appelée par celle-ci.
Le problème est que sur la page de connexion, le select marche bien comme dans l'exemple, alors que sur ma page modale, celui-ci prend d'autres propriétée comme le fait de ne pas apparaitre avec notamment un :display: none !important; au niveau css.
ne comprenant pas, je me tourne vers vous.
voici ma page de connexion
<!-- Formulaire de connexion à l'application -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Castor</title>
<link href="css/bootstrap/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-select.min.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<header id="header">
<link rel="shortcut icon" type="image/x-icon" href="ressources/favicon.ico" />
</header>
</br></br>
<body>
<div class="container">
<div class="row">
<div align="center" class="col-md-offset-3 col-md-6">
<img src="ressources/Logo_Castor.png"/>
<form id="test" method="post" action="Controler/controler_reinitialisation_mot_de_passe">
<legend> C@STOR </legend>
</div>
</div>
<div class="row">
<div class="col-md-offset-4">
<div class="clearfix">
<div class="form-group">
<label for="Login" class="col-md-2"> NNI : </label>
<div class="input">
<input type="text" class="col-md-3" name="login" id="Login" placeholder="NNI">
</div>
</div>
</div>
</div>
</div>
</br>
<div class="row">
<div class="col-md-offset-4">
<div class="clearfix">
<div class="form-group">
<label for="password" class="col-md-2"> Mot de passe: </label>
<div class="input">
<input type="password" class="col-md-3" name="password" id="password" placeholder="mot de passe"> </br>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-5 col-md-3">
<button type="submit" value="valider" id="envoyer" class=" btn btn-primary btn-block">Valider</button></br></br>
</form>
</div>
</div>
<div class="row">
<div class="col-md-offset-5 col-md-3">
<button data-toggle="modal" id='reinitialisermdp' href="Vue/vue_reinitialisation_mot_de_passe.php" data-target="#infos" data-backdrop="false" class="btn btn-warning btn-block">
Réinitialiser le mot de passe
</button>
</div>
</div>
<div class="row">
<div class="col-md-offset-5 col-md-3">
<button data-toggle="modal" href="Vue/vue_inscription.php" data-target="#inscription" data-backdrop="false" class="btn btn-success btn-block">
S'inscrire sur C@STOR
</button>
</div>
</div>
<div class="row">
<div class="col-md-offset-4">
<div>
<div class="modal fade" id="infos">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-4">
<div>
<div class="modal fade" id="inscription">
<div class="modal-dialog ">
<div class="modal-content">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-4">
<img src="ressources/EDF_logo.jpg"/>
</div>
</div>
</div>
<script src="JQuery/jquery.js"></script>
<script src="css/bootstrap/bootstrap.min.js"></script>
<script src="css/bootstrap/bootstrap-select.min.js"></script>
<script src="javascript/index.js"></script>
</body>
</html>
ma fenêtre modale
<center>
<link href="css/bootstrap/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-select.min.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Inscription C@STOR</h4>
</div>
<div class="modal-body">
<form id="inscription" method="post" action="Controler/controler_inscription.php">
<div class="alert">
<div id="reponse"></div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="Login" class="control-label col-md-offset-2 col-md-4"> NNI : </label>
<input type="text" class="form-control col-md-4" name="login" id="login" placeholder="NNI" required>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="Login" class="control-label col-md-offset-2 col-md-4">Confirmation du NNI : </label>
<input type="text" class="form-control col-md-4"name="login" id="confirmLogin" placeholder="NNI" required>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="Nom" class="control-label col-md-offset-2 col-md-4"> Nom : </label>
<input type="text" class="form-control col-md-4"name="Nom" id="Nom" placeholder="Nom" required>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="prenom" class="control-label col-md-offset-2 col-md-4"> Prénom : </label>
<input type="text" class="form-control col-md-4"name="prenom" id="prenom" placeholder="Prénom" required>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="password"class="control-label col-md-offset-2 col-md-4"> Mot de passe: </label>
<input type="password" class="form-control col-md-4"name="password" id="password" placeholder="mot de passe" required> </br>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="password"class="control-label col-md-offset-2 col-md-4">Confirmation Mot de passe: </label>
<input type="password" class="form-control col-md-4"name="password" id="confirmPassword" placeholder="mot de passe" required> </br>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="mail" class="control-label col-md-offset-2 col-md-4"> Mail : </label>
<input text name="mail" class="form-control col-md-4"id="mail" placeholder="Mail" required />
</div>
</div>
<div class="form-group form-inline">
<label for="fixe" class="control-label col-md-offset-2 col-md-4"> Téléphone fixe : </label>
<input text name="fixe"class="form-control col-md-4" id="fixe" placeholder="Téléphone" maxlength="10" required />
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="mobile" class="control-label col-md-offset-2 col-md-4"> Téléphone Mobile : </label>
<input text name="mobile"class="form-control col-md-4" id="mobile" placeholder="Portable" maxlength="10" />
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="region" class="control-label col-md-offset-2 col-md-4"> Région : </label>
<select id="select" class="form-control selectpicker col-md-4"> </select>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="guichet" class="control-label col-md-offset-2 col-md-4"> Guichet : </label>
<select id="select" class="form-control selectpicker col-md-4" data-live-search="true" ><option data-tockens="test">test1</option> </select>
</div>
</div>
<select class="selectpicker" data-live-search="true" >
<option>Alabama</option>
<option>Alaska </option>
<option>Arizona </option>
<option>Arkansas </option>
<option>California </option>
<option>Colorado </option>
<option>Connecticut </option>
<option>Delaware </option>
<option>Florida </option>
<option>Georgia </option>
<option>Hawaii </option>
<option>Idaho </option>
<option>Illinois Indiana </option>
<option>Iowa </option>
<option>Kansas </option>
<option>Kentucky </option>
<option>Louisiana </option>
<option>Maine </option>
<option>Maryland </option>
<option>Massachusetts </option>
<option>Michigan </option>
<option>Minnesota </option>
<option>Mississippi </option>
<option>Missouri </option>
<option>Montana Nebraska </option>
<option>Nevada </option>
<option>New Hampshire </option>
<option>New Jersey </option>
<option>New Mexico </option>
<option>New York </option>
<option>North Carolina </option>
<option>North Dakota </option>
<option>Ohio </option>
<option>Oklahoma </option>
<option>Oregon </option>
<option>Pennsylvania Rhode Island </option>
<option>South Carolina </option>
<option>South Dakota </option>
<option>Tennessee </option>
<option>Texas </option>
<option>Utah </option>
<option>Vermont </option>
<option>Virginia </option>
<option>Washington </option>
<option>West Virginia </option>
<option>Wisconsin </option>
<option>Wyoming</option>
</select>
</br>
<button type="submit" class="btn btn-primary">S'inscrire</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal">Fermer</button>
</div>
</center>
<script src="JQuery/jquery.js"></script>
<script src="css/bootstrap/bootstrap.min.js"></script>
<script src="css/bootstrap/bootstrap-select.min.js"></script>
<script src="javascript/index.js"></script>
comme il n'y a pas d'intéraction pour le moment, seule ces deux pages sont concernées.