html文本框和按钮这些点击时不显示边框的光晕。 或者淡化好看些。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html文本框和按钮这些点击时不显示边框的光晕。 或者淡化好看些。相关的知识,希望对你有一定的参考价值。

如图
无动作search:

点中search:

无动作button:

点中button:

我想去掉那点中 出现蓝色边框的效果。这怎么做?
或者点中时出现描边什么的, 就像百度的搜索框那样。
貌似要设置什么css样式?
求代码

直接在样式加:focusoutline:0;这样子就可以了,如果是像百度那种的话,就要用到js,当输入框获得焦点的时候,给输入框加一个样式,这样子就好了哦 ~追问

那我设置了border-radius 选中的时候怎么描边呢?

追答

这个跟你设置了border-radius无关。你只要做的操作是输入框获得焦点的时候给它加一个样式比如.on border-color:1px solid red这样子就可以了呀~!

参考技术A 最好把代码贴上来,因为现在不能确定蓝色光晕是什么属性来的,可能是border,也可能是box-shadow 也可能是outline追问

我没设置什么属性。只设置了 border:1px soid #d7d7d7 边框而已,那光晕是默认的

输出H1到H6并重复的网页上的文本框

我不想让任何人做我的作业,我只是想问一下,在更多人提出这些评论之前,是否有人能以正确的方式告诉我。

我有一个任务,我必须创建一个带有文本框和按钮的网页。用户必须将文本放在文本框中,按下按钮时,它应显示在H1中。当再次按下时,它应显示在H2中,直到H6然后重复到H1。

之前的作业要求我制作一个文本框和一个按钮,它只显示普通字母的用户文本。

这是代码:

<!DOCTYPE html>
<html lang="nl">
<head>
  <title>Paragraaf op tekstvlak.</title>
  <script>
    var index = 1;

    window.onload = function() {
      document.getElementById('btnKnop1').onclick = function() {
        var newElement = document.createElement('div');
        newElementid = 'div' + index++;

        var node = document.getElementById('txtElement').value;
        var newNode = document.createTextNode(node);

        newElement.appendChild(newNode);

        console.log(newElement);
        document.getElementById('div-Result').appendChild(newElement);
      }
    }
  </script>
</head>
<body>
  <p>Type hier een boodschap die u in de webpagina wilt zetten</p>
  <input type="text" id="txtElement"><br>
  <button id="btnKnop1">klik hier voor Heads.</button><br>
  <div id="div-Result"></div>
</body>
</html>

如果有人可以给我建议解决这个难题并将此代码更改为作业所要求的内容,我将感激不尽。我想我需要使用循环,但我不确定如何。该脚本不能包含jQuery。

答案

而不是div你可以创建h标签,并更新index.So而索引小于7你可以创建h+index标签。如果你把window.load放在script标签的末端附近,也不需要body

var index = 1;


document.getElementById('btnKnop1').onclick = function() {
  if (index < 7) {
    var newElement = document.createElement('h' + index);
    var node = document.getElementById('txtElement').value;
    var newNode = document.createTextNode(node);

    newElement.appendChild(newNode);
    document.getElementById('div-Result').appendChild(newElement);
    index++;
  }
}
<p>Type hier een boodschap die u in de webpagina wilt zetten</p>
<input type="text" id="txtElement"><br>
<button id="btnKnop1">klik hier voor Heads.</button><br>
<div id="div-Result"></div>
另一答案

而不是div你可以使用h标签。更正后的代码如下所示,您可以创建h标签而不是div

var index = 1;

document.getElementById('btnKnop1').onclick = function() {
    var newElement = document.createElement('h' + index);
    var node = document.getElementById('txtElement').value;
    var newNode = document.createTextNode(node);

    newElement.appendChild(newNode);
    document.getElementById('div-Result').appendChild(newElement);
    index = ++index % 7;
}

<p> Welcome to web designing.</p>
<input type="text" id="txtElement"><br>
<button id="btnKnop1">Change Heading Style</button><br>
<div id="div-Result"></div>

以上是关于html文本框和按钮这些点击时不显示边框的光晕。 或者淡化好看些。的主要内容,如果未能解决你的问题,请参考以下文章

html代码如何设置一个文本框和按钮,使点击按钮后跳转至新"固定值+输入文本“的网页

CSS 如何将搜索按钮做到框里?

如何在html添加一个搜索框和一个按钮?点击按钮,就搜索到框里的内容

css中怎么给网页设置一个搜索框

编写程序界面中包括一个标签、一个文本框和一个按钮。当用户单击按钮时,程序把文本框的内容复制到标签中

编写一个Applet小程序,显示一个文本框和一个按钮,单击按钮,在文本框内显示当前时间。