Центрирование переключателей - PullRequest
Новая
       19

Центрирование переключателей

0 голосов
/ 03 ноября 2019

Мне удалось создать окно поиска, которое выглядит и работает нормально в Chrome, но в EDGE / IE оно не выглядит и не работает одинаково. Кажется, что flexbox не поддерживается EDGE / IE, поэтому переключатели не центрированы. В Firefox они располагаются по центру, но вместо поля поиска появляется уродливая черная рамка. Как мне сделать, чтобы создать решение, которое выглядит хорошо во всех этих браузерах? Главное, чтобы в поле поиска находились 3 переключателя, а под ними - два связанных значка. Я удалил некоторые URL и т. Д. Из кода, так как это еще не должно быть видно публике. Надеюсь, в любом случае это сработает, чтобы понять, что я имею в виду. 

<html lang="en">
<head>
  <meta charset="UTF-8">
<script src="https://kit.fontawesome.com/43795a2492.js" crossorigin="anonymous"></script>
<title>Search</title>
  <style>
  #searchbox {
  background-color: rgba(0, 83, 155, 0.5);
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  padding-bottom: 1px;
}

#searchbox h1 {
  color: white;
  text-align: center;
  padding-top: 10px;
}

#searchbox h3{
  color: rgba(0, 83, 155, 0.5);
}

#searchbox span {
  font-size: 18px;
  font-weight: bolder;
  color: white;
}

#searchbox .icons {
 margin: 2% 5%;
 display: flex;
 flex-direction: row;
 justify-content: space-around;
}

#searchbox .icons a {
  text-decoration: none;
}

#searchbar{
position:relative;
width:100%;
}

#searchbox form{
  color: white;
  margin:0 5%;
  width:90%;
}

#searchbox .search_button{
  position:absolute;
  right:0px;
  top:0;
  width: 80px;
  height: 41px;
  background-color: #F7C522;
  color: rgba(0, 83, 155, 0.5);
  padding: 2px 2px;
  vertical-align: middle;
  font-size: 14px;
  font-weight: bolder;
  border: 1px solid transparent;
  cursor:pointer;
}

#uquery{
    height: 41px;
    color: grey;
    margin-bottom: 5px;
    width:calc(100% - 85px);
    padding:0 50px 0 20px;
}

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

#searchbox input[type="radio"]{
  margin-right: 0;
/*  margin-left: 6px; */
}

#searchbox .radiobtns-container{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
</style>
</head>

<body>
<script type="text/javascript">
function PreProcess(myForm) {

  if (myForm.limiter.value == "ebooks" ) {
      myForm.bquery.value = myForm.uquery.value + " AND (PT eBook)";
  }
  else if (myForm.limiter.value == "ejournals") {
          myForm.bquery.value = myForm.uquery.value +  " AND (ZT *Article* OR PT *article* OR ZT Serial)";
  }
  else {
    myForm.bquery.value = myForm.uquery.value;
  }
}
</script>

<!-- BEGIN: General Custom Search Box =============================== -->
<div id="searchbox">
  <h1>Search</h1>
    <form accept-charset="UTF-8" action="" method="get" target="_blank" onsubmit="">
    <!-- Inputs for URL structure -->
    <input name="direct" value="true" type="hidden">
    <input name="scope" value="site" type="hidden">
        <input name="site" value="" type="hidden">
    <!-- Authentication and Profile Values -->
        <input name="authtype" value="" type="hidden">
    <input name="user" value="" type="hidden">
    <input name="password" value="" type="hidden">
        <input name="custid" value="" type="hidden">
        <input name="groupid" value="main" type="hidden">
        <input name="profile" value="" type="hidden">
      <!-- search box and submit button -->
    <div id="searchbar">
    <input name="bquery" value="" type="hidden">
    <label for="uquery" class="visuallyhidden">Search: </label>
    <input name="uquery" id="uquery" value="" placeholder="  Search for articles, books, journals &amp; more..." size="70" type="text">
    <button type="submit" class="search_button">Search</button>
    </div>

    <!-- Limiter: All -->
    <br>
    <div class="radiobtns-container">
      <div class="radiobtn-text">
       <input type="radio" name="limiter" id="all_radio" value="all" checked="">
       <label for="all_radio">All</label>
      </div>
    <!-- Limiter: eJournals -->
      <div class="radiobtn-text">
       <input type="radio" name="limiter" id="ejournals_radio" value="ejournals">
       <label for="ejournals_radio">eJournals</label>
      </div>
    <!-- Limiter: eBooks -->
      <div class="radiobtn-text">
       <input type="radio" name="limiter" id="ebooks_radio" value="ebooks">
       <label for="ebooks_radio">eBooks</label>
      </div>
    </div>
  </form>
  <div class="icons">
    <a href="">
      <span class="fa-stack fa-2x">
        <i class="fas fa-circle fa-stack-2x" style="color:#F7C522" aria-hidden="true"></i>
        <i class="fas fa-search fa-stack-1x fa-inverse" aria-hidden="true"></i>
      </span>
      <span>Advanced search</span>
    </a>
    <a href="">
      <span class="fa-stack fa-2x">
        <i class="fas fa-circle fa-stack-2x" style="color:#F7C522" aria-hidden="true"></i>
        <i class="fas fa-book-open fa-stack-1x fa-inverse" aria-hidden="true"></i>
      </span>
      <span>Library Catalogue</span>
    </a>
  </div>
</div>
</body>
</html>
...