1. ホーム
  2. 質問と答え
  3. 特定の要素に外部CSSを適用する方法。他の要素のスタイルは変更しないでください。

特定の要素に外部CSSを適用する方法。他の要素のスタイルは変更しないでください。

2017-09-21 8 views
0

私はスライダーを使用しています。 2つのo/pが最小値であり、2つが最大値である。しかし、このスライダーのために私は外部CSSとJavaScriptファイルを使用する必要があります。他の要素のスタイルを変更します。このCSSをスライダにのみ適用したいと思います。私は何をすべきか？特定の要素に外部CSSを適用する方法。他の要素のスタイルは変更しないでください。

出典

2017-09-21 Yogesh Gadade

+0

たちは、スライダーを見ることができるので、あなたには、いくつかのコードを投稿することが可能になることができますか？ – JohnRambo

+0

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

答えて

0

要素クラスの呼び出し方法を確認して、<style></style>を使用して<head></head>で変更することができます。

E.G.

要素をマウスで右クリックし、 "要素の検査"オプションを選択すると、正しい要素名が表示され、以降では<head>のstyleプロパティでそのスタイルを変更できます。

このコードはあなたにスライダーの背景を変更することがホ例を示します：！

を使用して 
<!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>

重要は自分のスタイルを変更する要素を強制しようとしています。

私は、少なくとも少し助けを願っ:)

敬具、 ディミタールのゲオルギエフ

出典

2017-09-21 09:52:36 JohnRambo

+0

ありがとうございますJohnRambo –

関連する問題

 関連する問題