bootswatch石板主题 - 文件上传“文本”不起作用(bootswatch slate theme — file upload “text” does not work)

我正在尝试使用

https://bootswatch.com/slate/

我有文件上传jsp，我认为这个功能可以工作，但是在视觉/视觉上它不起作用。 

<html>

<Head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

  <link href="https://bootswatch.com/slate/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <form id="testf" method="post" enctype="multipart/form-data" action="x.do">
    <div class="col-md-8">
      <label>Browse
        <div class="text-warning">
          <input id="uploadfile" name="uploadfile" type="file" accept=".csv">
          <div>
      </label>
      </div>
  </form>
</body>
</html> 
  
 

 

 在石板主题中，我没有看到文字“No File Chosen”。 选择后我没有看到带有“选定文件名”的文本 
 

 具有完全相同的代码和香草bootstrap我可以看到这些文本......任何人都可以帮助我理解我如何才能在石板主题中工作？ 特别是在选择文件后，我需要显示名称.. 
I am trying to use
 

https://bootswatch.com/slate/
 

I have file upload jsp, I think the functionality works but view/visually it is not working.
 

 
 
  
  
<html>

<Head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

  <link href="https://bootswatch.com/slate/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <form id="testf" method="post" enctype="multipart/form-data" action="x.do">
    <div class="col-md-8">
      <label>Browse
        <div class="text-warning">
          <input id="uploadfile" name="uploadfile" type="file" accept=".csv">
          <div>
      </label>
      </div>
  </form>
</body>
</html> 
  
 

 

In slate theme, I don’t see the text “No File Chosen”. and after selection I don't see text with "selected file name" 
 

with exact same code, and vanilla bootstrap I can see those texts... can anyone help me understand how can I get that working in slate theme? as specially after the file is selected I need to show the name..

                
最满意答案

                
                    
                        
 您只需更改文本颜色，因为引导默认值为rgb（ 51,51,51 ） ，而Slate主题对其背景使用深色（ ＃272b30 / rgb（39,43,48） ）。 
 

 CSS示例： 
 
input[type=file] { color: white; }
 

 工作示例： 
 
 
  
  
input[type=file] {
  color: white;
} 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://bootswatch.com/slate/bootstrap.min.css" rel="stylesheet" />

<form id="testf" method="post" enctype="multipart/form-data" action="x.do">
  <div class="col-md-8">
    <label>Browse
      <input id="uploadfile" name="uploadfile" type="file" accept=".csv">
    </label>
  </div>
</form> 
  
 

You just need to change the text color since the bootstrap default is rgb(51, 51, 51) and the Slate theme is using a dark color for it's body background (#272b30 / rgb(39, 43, 48)).
 

CSS Example:
 
input[type=file] { color: white; }
 

Working Example: 
 
 
  
  
input[type=file] {
  color: white;
} 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://bootswatch.com/slate/bootstrap.min.css" rel="stylesheet" />

<form id="testf" method="post" enctype="multipart/form-data" action="x.do">
  <div class="col-md-8">
    <label>Browse
      <input id="uploadfile" name="uploadfile" type="file" accept=".csv">
    </label>
  </div>
</form> 
  
 

bootswatch石板主题 - 文件上传“文本”不起作用(bootswatch slate theme — file upload “text” does not work)

                
 我正在尝试使用 
 

 https://bootswatch.com/slate/ 
 

 我有文件上传jsp，我认为这个功能可以工作，但是在视觉/视觉上它不起作用。 
 

 
 
  
  
<html>

<Head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

  <link href="https://bootswatch.com/slate/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <form id="testf" method="post" enctype="multipart/form-data" action="x.do">
    <div class="col-md-8">
      <label>Browse
        <div class="text-warning">
          <input id="uploadfile" name="uploadfile" type="file" accept=".csv">
          <div>
      </label>
      </div>
  </form>
</body>
</html> 
  
 

 

 在石板主题中，我没有看到文字“No File Chosen”。 选择后我没有看到带有“选定文件名”的文本 
 

 具有完全相同的代码和香草bootstrap我可以看到这些文本......任何人都可以帮助我理解我如何才能在石板主题中工作？ 特别是在选择文件后，我需要显示名称.. 
I am trying to use
 

https://bootswatch.com/slate/
 

I have file upload jsp, I think the functionality works but view/visually it is not working.
 

 
 
  
  
<html>

<Head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

  <link href="https://bootswatch.com/slate/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <form id="testf" method="post" enctype="multipart/form-data" action="x.do">
    <div class="col-md-8">
      <label>Browse
        <div class="text-warning">
          <input id="uploadfile" name="uploadfile" type="file" accept=".csv">
          <div>
      </label>
      </div>
  </form>
</body>
</html> 
  
 

 

In slate theme, I don’t see the text “No File Chosen”. and after selection I don't see text with "selected file name" 
 

with exact same code, and vanilla bootstrap I can see those texts... can anyone help me understand how can I get that working in slate theme? as specially after the file is selected I need to show the name..

                
最满意答案

                
                    
                        
 您只需更改文本颜色，因为引导默认值为rgb（ 51,51,51 ） ，而Slate主题对其背景使用深色（ ＃272b30 / rgb（39,43,48） ）。 
 

 CSS示例： 
 
input[type=file] { color: white; }
 

 工作示例： 
 
 
  
  
input[type=file] {
  color: white;
} 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://bootswatch.com/slate/bootstrap.min.css" rel="stylesheet" />

<form id="testf" method="post" enctype="multipart/form-data" action="x.do">
  <div class="col-md-8">
    <label>Browse
      <input id="uploadfile" name="uploadfile" type="file" accept=".csv">
    </label>
  </div>
</form> 
  
 

You just need to change the text color since the bootstrap default is rgb(51, 51, 51) and the Slate theme is using a dark color for it's body background (#272b30 / rgb(39, 43, 48)).
 

CSS Example:
 
input[type=file] { color: white; }
 

Working Example: 
 
 
  
  
input[type=file] {
  color: white;
} 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://bootswatch.com/slate/bootstrap.min.css" rel="stylesheet" />

<form id="testf" method="post" enctype="multipart/form-data" action="x.do">
  <div class="col-md-8">
    <label>Browse
      <input id="uploadfile" name="uploadfile" type="file" accept=".csv">
    </label>
  </div>
</form>