-
aamaralPerguntado em 12 de maio de 2023 às 14:39
Pessoal, formatei meu formulário para que tivesse um visual legal, sem quadrados nos blocos de escrita, e por aí vai. Acontece que muito tempo sem editar ele, hoje fui mexer em algumas coisas e ao finalizar, vi que o visual já não estava o mesmo.
Tenho dois prints, esse é o que vejo no editar, que é a aparência que eu desejo:
Mas, ao publicar, só estou conseguindo os formatos quadrados como nessa imagem:
Meu código CSS está bagunçado e eu nem entendo nada, só fui adicionado algumas coisas conforme estudos anteriores.
.form-error-message {
display : none;
}
.form-validation-error {
box-shadow : none !important;
}
.form-line-error {
background : none;
}
.form-all {
background : transparent;
}
.supernova {
background-color : transparent !important;
}
.form-all {
border : none !important;
-webkit-box-shadow : none !important;
-moz-box-shadow : none !important;
box-shadow : none !important;
}
#input_111_full{
width: 40px
}
/*Main Box Content*/
.modalBox {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
color: black;
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
/*When the href are clicked*/
.modalBox:target {
opacity: 1;
pointer-events: auto;
}
/*Positioning of the child box*/
.modalBox > div {
width: 90vw;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 0px;
background: white;
}
/*Positioning and style of the close button*/
.close {
background: white;
color: black;
line-height: 25px;
position: absolute;
right: 1px;
text-align: center;
top: 1px;
width: 35px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: none;
border: none;
}
/*Style when mouse hovers on the close button*/
.close:hover {
background: black;
color: white;
}
/*Default style of the open pop-up button*/
.button {
background-color: black;
border: none;
color: white;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
@media (max-width:758px){
.form-pagebreak{
transform:scale(0.7) translateX(-10%);
border-top: none!important;
}
#cid_2 .form-pagebreak{
transform:scale(0.7);
border-top: none!important;
flex-wrap:nowrap!important;
}
.form-button-error{
position:absolute;
bottom: 0px;
}
}
.form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {
box-shadow: 0px 0px 0px !important;
border-top : none;
border-left : none;
border-right : none;
}
.form-error-message {
background: #F07E01 !important;
padding: 1px !important;
}
.form-error-arrow {
border-bottom-color: #F07E01; !important;
}
.form-required {
color: #F07E01;
}
.form-line-error {
background: none repeat scroll 0 0;
}
.form-error-message {
width: 185px;
}
.form-button-error {
display: block;
}
.form-textbox {border-radius: 0px !important;}
.form-label.form-label-auto {
display: inline-block;
float: left;
text-align: left;
}
-
aamaralRespondido em 12 de maio de 2023 às 15:02
Peço por gentileza que me ajudem a formatar esses visuais para que fiquem como antes.
-
Lucas_ORespondido em 12 de maio de 2023 às 18:48
Oi Alexandre,
Obrigado por entrar em contato com o suporte da Jotform. Acredito que o que tu deseja é manter a cor de fundo e manter somente a borda inferior dos campos, certo? Escrevi um código CSS para corrigir esse problema. Siga estes passos:
- No Criador de Formulários, clique em no Rolo de pintar no lado direito da tela.
- Clique em Estilos.
- Adicione o código CSS abaixo na área Injetar código CSS personalizado.
Código CSS:
input {
border: 0px !important;
border-bottom: 1px solid gray !important;
}
body {
background-color: #f3f3ff !important;
}
Não é necessário apagar o código CSS existente.
Fico à tua disposição.
