2017-09-21 16 views
0

J'utilise le curseur. Qui gaves deux o/p un est la valeur minimale et la seconde est la valeur max. Mais pour ce curseur, je dois utiliser un fichier CSS et JavaScript externe. Ce qui change le style de mes autres éléments. Je veux appliquer ce CSS sur mon curseur uniquement. Que devrais-je faire?Comment appliquer un CSS externe à un élément spécifique. Le style de l'autre élément ne doit pas être modifié

+0

Peut-être il sera possible pour vous d'afficher un code afin que nous puissions voir le curseur? – JohnRambo

+0

https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_forms_slider_range –

Répondre

0

Vous pouvez essayer de vérifier comment la classe d'éléments est appelée et vous pouvez la modifier dans le <head></head> en utilisant le <style></style>.

E.G.

Si vous faites un clic droit avec votre souris sur l'élément et sélectionnez l'option "Inspecter l'élément" il vous guidera vers les bons noms d'éléments et à partir de, vous pouvez changer leur style dans la propriété style du <head>.

Ce code vous donne un exemple ho changer l'arrière-plan du curseur:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 

    <style> 
    .ui-slider-bg{ 
     background: #000000 !important; 
    } 
    .ui-bar-inherit{ 
     background: #FFFFFF !important; 
    } 
    .ui-btn.ui-slider-handle{ 
     background: #FF0000 !important; 
    } 

    </style> 


    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 

    <div data-role="page"> 
     <div data-role="header"> 
     <h1>Range Slider</h1> 
     </div> 

    <div data-role="main" class="ui-content"> 
     <form method="post" action="/action_page_post.php"> 
     <div data-role="rangeslider"> 
      <label for="price-min">Price:</label> 
      <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000" > 
      <label for="price-max">Price:</label> 
      <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000"> 
     </div> 
     <input type="submit" data-inline="true" value="Submit"> 
     <p>The range slider can be useful for allowing users to select a specific price range when browsing products.</p> 
     </form> 
    </div> 
    </div> 

</body> 
</html> 

Utilisation de la importante va forcer les éléments à changer leur style.

J'espère aidé au moins un peu :)

Meilleures salutations, Dimitar Georgiev

+0

Merci beaucoup JohnRambo –