スライドショーの次のボタンと前のボタンを囲むのを防ぐにはどうしたらいいですか？

自分のスライドショーボタンを作成しましたが、ボタンをクリックすると、ボタンの形状の代わりにボックスが囲まれます。とにかくこれを変更して、ボックスがボタンの周りを回るか、まったく表示されないようにしますか？スライドショーの次のボタンと前のボタンを囲むのを防ぐにはどうしたらいいですか？

CSSコード：

.slideshow{ 
       max-width: 650px; 
       position: relative; 
       margin: auto; 
       margin-top: 20px; 
       margin-bottom: 10px; 
      } 
      /* Next & previous buttons */ 
     #btnSlPrev, #btnSlNxt { 
       cursor: pointer; 
       position: absolute; 
       top: 50%; 
       width: auto; 
       margin-top: -22px; 
       padding: 2px; 
       color: #F00; 
       background-color: #039; 
       font-weight: bold; 
       font-size: 18px; 
       transition: 0.6s ease; 
       border-radius: 20px 20px 20px 20px; 
      } 

     #btnSlNxt{ 
      right: 0; 
     }

HTMLコード：

<div class = "slideshow"> 
      <img id="slide" src="picture" width=288 height=209 alt="Image 1"> 
      <button id="btnSlNxt" onclick="nextSlide()">Next</button> 
      <button id="btnSlPrev" onclick="prevSlide()">Previous</button> 
      <p id="slnum">Slide 1 of 3</p> 

      </div>

JavaScriptを：あなたが（には、事前に定義されたスタイルを持っている唯一のいくつかのブラウザで発生Chromeを参照してください何

var inum = 1; 

    function newSlide(inum) 
    { 
     var iname = "image name" + inum + ".jpg"; 
     var newimg = document.getElementById("slide"); 
     newimg.setAttribute("src", iname); 
     var slidenum = "Slide " + inum + " of 3"; 
     document.getElementById("slnum").innerHTML = slidenum; 
    } 

    function nextSlide() 
    { 
     inum = inum + 1; 
     newSlide(inum); 
     document.getElementById("btnSlPrev").disabled = false; 
     if (inum == 3) { 
      document.getElementById("btnSlNxt").disabled = true; 
     } 
    } 

    function prevSlide() 
    { 
     inum = inum - 1; 
     newSlide(inum); 
     document.getElementById("btnSlNxt").disabled = false; 
     if (inum == 1) { 
      document.getElementById("btnSlPrev").disabled = true; 
     } 
    } 
    </script>

出典

2016-11-26 user7196813