Fieldset как изменить рамку

I want to set border color of field set. I am using class but this is not working properly because i want to remove fieldset default border color. so how can I use fieldset border color. <field...

I want to set border color of field set. I am using class but this is not working properly because i want to remove fieldset default border color.
so how can I use fieldset border color.

<fieldset class="field_set">
    <legend>box</legend>
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
           <tr>
               <td>&nbsp;</td>
           </tr>
      </table>
</fieldset>

css

.field_set{
 border-color:#F00;
}

Manoj Govindan's user avatar

asked Sep 18, 2010 at 10:32

Kali Charan Rajput's user avatar

0

It does appear red on Firefox and IE 8. But perhaps you need to change the border-style too.

.field_set{
  border-color: #F00;
  border-style: solid;
}
<fieldset class="field_set">
  <legend>box</legend>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</fieldset>

alt text

answered Sep 18, 2010 at 10:36

kennytm's user avatar

kennytmkennytm

504k104 gold badges1068 silver badges996 bronze badges

2

It works for me when I define the complete border property. (JSFiddle here)

.field_set{
 border: 1px #F00 solid;
}​

the reason is the border-style that is set to none by default for fieldsets. You need to override that as well.

answered Sep 18, 2010 at 10:37

Pekka's user avatar

I added it for all fieldsets with 

fieldset {
        border: 1px solid lightgray;
    }

I didnt work if I set it separately using for example

border-color : red

. Then a black line was drawn next to the red line.

Script47's user avatar

Script47

14k4 gold badges43 silver badges64 bronze badges

answered Feb 28, 2013 at 10:29

user1021860's user avatar

If you don’t want 3D border use:

border:#f00 1px solid;

answered Sep 18, 2010 at 10:40

mx0's user avatar

mx0mx0

6,14711 gold badges51 silver badges53 bronze badges

Источник

0 / 0 / 0

Регистрация: 20.10.2015

Сообщений: 56

1

18.05.2016, 14:19. Показов 16568. Ответов 5

Всем привет! А можно ли изменить размер рамки тега fieldset? В стиле могу изменить ширину, цвет, а что то с размером не получается

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь



0

Programming

Эксперт

94731 / 64177 / 26122

Регистрация: 12.04.2006

Сообщений: 116,782

 18.05.2016, 14:19

5

Богатый духовно

455 / 262 / 145

Регистрация: 10.03.2015

Сообщений: 1,058

18.05.2016, 15:08

2



0

0 / 0 / 0

Регистрация: 20.10.2015

Сообщений: 56

18.05.2016, 16:13

 [ТС]

3

Да, был я на этом сайте что то не получается а вы пробовали работать с тегом ?



0

Эксперт HTML/CSS

2960 / 2578 / 1068

Регистрация: 15.12.2012

Сообщений: 9,733

Записей в блоге: 11

18.05.2016, 16:23

4

Ganster 89, приведите пример Вашего кода…



0

boilzzz

Богатый духовно

455 / 262 / 145

Регистрация: 10.03.2015

Сообщений: 1,058

18.05.2016, 16:28

5

Ganster 89, Понял размер рамки сейчас поищу

Добавлено через 4 минуты
Ganster 89, Ну в общем я попробовал обычным

CSS 
1

border:10px solid red;

Пример тык



1

Ganster 89

0 / 0 / 0

Регистрация: 20.10.2015

Сообщений: 56

18.05.2016, 16:43

 [ТС]

6
HTML5 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<html>
                 
            <head>
              <title> Пример формы регистрации пользователя </title>
              <meta hhtp-equiv="Content Type" content="text/html; charset=windows-1251 ">
            
             <style type="text/css">
              fieldset{ border: solid 2px red;
                          border-top: red; 
                         }
   
              body {/*Cтиль для всего документа*/
                       font-size: 10pt;/*Размер шрифта*/
                       font-family: "Verdana", sans-serif;/*Название шрифта*/ 
                      }
                  
                 form div {/*Стиль для всех div, расположенных внутри form*/
                                margin-bottom: 20px; /*Отступ блока снизу*/    
                              }    
                     </style>  
            </head>
            
            <body>
        
                    <div><fieldset>
                        <legend>Пол*:</legend>
                            Муж. <input type="radio" name="m"  value="1">
                            Жен. <input type="radio" name="s"  value="2">
                        </fieldset>
                    </div>
                                        
               </form>    
            </body>
 </html>

Нашёл как без верхней или нижней отображать, а как сузить по размерам не нашёл

Добавлено через 6 минут
boilzzz, Нормалёк, спасибо! Чуть чуть не нашёл ))



0
Источник

Asked
2 years, 6 months ago

Viewed
2k times

Briefly, i want to change the color of an outline of a fieldset to a color of my choice (blue for example) instead of the default grey outline color.

And this happens when i click on the (input) field:

Note CSS property does not work

I use this code

fieldset {
  border: 2px solid blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="legned.css">
  <!-- Latest compiled and minified CSS -->
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  <link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
  <title>Bootstrap Legned</title>
</head>

<body>

  <fieldset class="border p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">First Name</legend>
    <input name="text1" type="text" />
  </fieldset>
  <fieldset class="border p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">Last Name</legend>
    <input name="text1" type="text" />
  </fieldset>

</body>

</html>

The illustrations are attached below:

Before click on input

After click on input

drpelz's user avatar

drpelz

80111 silver badges43 bronze badges

asked Jul 27, 2020 at 20:34

Ali Aker's user avatar

1

You should fix how you’re importing your Bootstrap as well, but when I removed .border, your CSS worked after adding !important to make sure it overrides the inherited Bootstrap CSS.

fieldset {
  border: 2px solid blue !important;
}
<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>

  <fieldset class="p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">First Name</legend>
    <input name="text1" type="text" />
  </fieldset>
  <fieldset class="p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">Last Name</legend>
    <input name="text1" type="text" />
  </fieldset>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

answered Jul 27, 2020 at 20:41

Jeff Berlin's user avatar

Jeff BerlinJeff Berlin

5906 silver badges16 bronze badges

1

Just add an empty div to the fieldset and style it this way:

fieldset {
  border: none;
  position: relative;
  margin-bottom: 0.5em;
}

input:focus ~ div {
  border: 2px solid blue;
}

fieldset > div {
  height: calc(100% - 0.5em);
  width: 100%;
  position: absolute;
  top: 0.5em;
  left: 0;
  border: 2px solid lightgray;
  z-index: -1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="legned.css">
  <!-- Latest compiled and minified CSS -->
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  <link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
  <title>Bootstrap Legned</title>
</head>

<body>
  <fieldset class="p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">First Name</legend>
    <input name="text1" type="text" />
    <div></div>
  </fieldset>
  <fieldset class="p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">Last Name</legend>
    <input name="text1" type="text" />
    <div></div>
  </fieldset>
</body>

</html>

answered Jul 27, 2020 at 20:55

Mobina's user avatar

MobinaMobina

5,8532 gold badges23 silver badges37 bronze badges

Источник

Asked
2 years, 6 months ago

Viewed
2k times

Briefly, i want to change the color of an outline of a fieldset to a color of my choice (blue for example) instead of the default grey outline color.

And this happens when i click on the (input) field:

Note CSS property does not work

I use this code

fieldset {
  border: 2px solid blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="legned.css">
  <!-- Latest compiled and minified CSS -->
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  <link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
  <title>Bootstrap Legned</title>
</head>

<body>

  <fieldset class="border p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">First Name</legend>
    <input name="text1" type="text" />
  </fieldset>
  <fieldset class="border p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">Last Name</legend>
    <input name="text1" type="text" />
  </fieldset>

</body>

</html>

The illustrations are attached below:

Before click on input

After click on input

drpelz's user avatar

drpelz

80111 silver badges43 bronze badges

asked Jul 27, 2020 at 20:34

Ali Aker's user avatar

1

You should fix how you’re importing your Bootstrap as well, but when I removed .border, your CSS worked after adding !important to make sure it overrides the inherited Bootstrap CSS.

fieldset {
  border: 2px solid blue !important;
}
<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>

  <fieldset class="p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">First Name</legend>
    <input name="text1" type="text" />
  </fieldset>
  <fieldset class="p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">Last Name</legend>
    <input name="text1" type="text" />
  </fieldset>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

answered Jul 27, 2020 at 20:41

Jeff Berlin's user avatar

Jeff BerlinJeff Berlin

5906 silver badges16 bronze badges

1

Just add an empty div to the fieldset and style it this way:

fieldset {
  border: none;
  position: relative;
  margin-bottom: 0.5em;
}

input:focus ~ div {
  border: 2px solid blue;
}

fieldset > div {
  height: calc(100% - 0.5em);
  width: 100%;
  position: absolute;
  top: 0.5em;
  left: 0;
  border: 2px solid lightgray;
  z-index: -1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="legned.css">
  <!-- Latest compiled and minified CSS -->
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  <link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
  <title>Bootstrap Legned</title>
</head>

<body>
  <fieldset class="p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">First Name</legend>
    <input name="text1" type="text" />
    <div></div>
  </fieldset>
  <fieldset class="p-2 w-25 mr-auto ml-2">
    <legend class="w-auto">Last Name</legend>
    <input name="text1" type="text" />
    <div></div>
  </fieldset>
</body>

</html>

answered Jul 27, 2020 at 20:55

Mobina's user avatar

MobinaMobina

5,8532 gold badges23 silver badges37 bronze badges

Источник

Понравилась статья? Поделить с друзьями:

Читайте также:

  • Filelists sqlite bz2 errno 14 http error 404 not found
  • Fiat ducato ошибка p2148
  • Filedb dll ошибка 1с
  • Fiat ducato ошибка p0683 13
  • Filecoauth exe ошибка приложения как устранить windows 10

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии