Problema con box login

ezzezhito · #1 (**permalink**) 29/03/2016, 16:39

Hola buenas tardes, soy nuevo aqui en el foro y queria dejarles mi inquietud, que de seguro, para muchos sera facil de resolver..pero claro, no para mi..

El login seria asi para que se den idea

Usuario:
"campo para introducir datos"
Password:
"Campo para introducir datos"

Ahora.. Yo quiero eliminar las palabras Usuario y password, que estan afuera del box y ponerlas adentras del box. y que cuando pongas el mouse para escribir tus datos, esto se borre.. Muchas webs lo tienen, me estuve matando y no puedo lograr hacerlo.

Eh puesto value= para tener el campo con una palabra, pero este queda fijo y hay que borrarlo a mano, algo incomodo..

Espero que me hayan entendido

Muchas gracias

ezzezhito · #2 (**permalink**) 29/03/2016, 17:44

Agregue
value="" placeholder="Username or Email"></p>
<input type="password" name="password" value="" placeholder="Password"></p>

En el de username or email. Anda bien y como quiero
sin embargo, en el de password me aparece la palabra oculta y al poner el mousse ni siquiera se borra

xfxstudios · #3 (**permalink**) 30/03/2016, 13:26

hablas del placeholder?? o del label???

ezzezhito · #4 (**permalink**) 30/03/2016, 14:05

a esto me refiero

El de usuario me aparece bien, cuando pongo el mouse y escribo la palabra se borra.
pero en el campo de contraseña, primero que la palabara aparece oculta y segundo, al poner el mousse para escribir, hay que borrarla completamente.

Cita:

<div onblur="valida1();" id="usuario" aria-hidden="true" class="hint ellipsis"></div>

<input id="usuario" aria-label="usuario" class="field" name="user" value="" placeholder="Usuario" spellcheck="false" size="30" maxlength="5096" type="text">

</div>

<div class="field-underline"></div>

<div class="space padder2"> <span class="input-msg show">

</span></div></div>
<div class="formrow">

<div class="padding2">

<div id="hPass" aria-hidden="true" class="hint ellipsis">Password</div>

<input id="pass" aria-label="Contrasena" class="field tTip" name="pass" value=" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">
<span
class="input-msg show">

asi seria el codigo que tengo maso menos, asi me anda con el script...anda perfecto y funciona todo, no queiro tocar alguna variable que no entienda y despues que no me ande el script, solo quiero cambiar eso

xfxstudios · #5 (**permalink**) 30/03/2016, 16:10

error:

Código HTML:

Ver original<input id="pass" aria-label="Contrasena" class="field tTip" name="pass" value=" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">

solucion:

Código HTML:

Ver original<input id="pass" aria-label="Contrasena" class="field tTip" name="pass" value="" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">

unas simples comillas no colocadas, ojo con eso

ezzezhito · #6 (**permalink**) 30/03/2016, 19:19

Cita:

Iniciado por xfxstudios

error:

Código HTML:

Ver original<input id="pass" aria-label="Contrasena" class="field tTip" name="pass" value=" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">

solucion:

Código HTML:

Ver original<input id="pass" aria-label="Contrasena" class="field tTip" name="pass" value="" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">

unas simples comillas no colocadas, ojo con eso

uff! Me salvaste, no lo habia visto y no entendia por que no andaba. Ahi lo corregi y anda.

Te hago una ultima consulta, como podria darle estilo SOLO a los dos "box" de login, osea, donde escribis los datos.
Tengo todo el estilo al rededor, etc, pero el box de login me queda medio feo

xfxstudios · #7 (**permalink**) 30/03/2016, 19:31

creas una clase en el css, algo asi mas o menos:

Código CSS:

Ver original.input{
    width:100%;
    height:15px;
    border-radius:5px;
}
.input:hover{
    border:solid;
    border-color:#00BDE4;
    border-width:1px;
}

y la asignas a los inputs:

Código HTML:

Ver original<input id="pass" aria-label="Contrasena" class="field tTip input" name="pass" value="" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">

ezzezhito · #8 (**permalink**) 30/03/2016, 19:41

mmm no te entendi mucho, segun tengo, el codigo de estilo es este:
<div id="label17" class="label-text" aria-hidden="true" style="display: block; color: rgb(170, 170, 170); position: absolute; top: 0px; left: 0px; width: 239px; padding: 0px; text-align: start; font-size: 13.3333px;">usuario</div>

en teoria, este es el del estilo de box

aqui el ejemplo

el 1 seria el mio

xfxstudios · #9 (**permalink**) 30/03/2016, 19:48

ese div segun es la etiqueta, a que le quieres dar estilo???? a las label o a los inputs????

ezzezhito · #10 (**permalink**) 30/03/2016, 19:57

Cita:

Iniciado por xfxstudios

ese div segun es la etiqueta, a que le quieres dar estilo???? a las label o a los inputs????

A todo el recuadro que dice usuario/contraseña. creo que es el inputs... pero no se como agregarlo. hay forma de hacerlo con ese codigo que te di? pero que quede en el html, sin necesidad de hacerlo con css?

xfxstudios · #11 (**permalink**) 30/03/2016, 21:18

Cita:

Iniciado por xfxstudios

creas una clase en el css, algo asi mas o menos:

Código CSS:

Ver original.input{
    width:100%;
    height:15px;
    border-radius:5px;
}
.input:hover{
    border:solid;
    border-color:#00BDE4;
    border-width:1px;
}

y la asignas a los inputs:

Código HTML:

Ver original<input id="pass" aria-label="Contrasena" class="field tTip input" name="pass" value="" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">

debes probar con este codigo, el que me diste no tiene nada que ver con el input como tal, aqui se explica bien, solo debes crear la clase con la que le quieras asignar el estilo a los inputs y agregarla como ver alli

Ejemplo:

class="field tTip input"

la que esta en negrillas es la clase nueva por ejemplo y se le coloca a cada input al que quieras asignarle ese estilo en particular

Ejemplo: https://jsfiddle.net/xfxstudios/w8vt6ojw/

ezzezhito · #12 (**permalink**) 30/03/2016, 22:21

ok eh entendido, (creo)
ahora, como hago para apuntar eso al .css

Osea, creo el .css con el codigo de diseño del box, y luego como lo apunto? osea, usco class=""

pero, como apunto el archivo .css

xfxstudios · #13 (**permalink**) 30/03/2016, 22:23

ve ESTO y te orientas mejor, cualquier otra duda avisas, claro despues de revisar el enlace. Saludos

ezzezhito · #14 (**permalink**) 30/03/2016, 22:27

Cita:

Iniciado por xfxstudios

ve [URL="https://www.google.co.ve/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=curso%20basico%20de%20html%20y%20css"]ESTO[/URL] y te orientas mejor, cualquier otra duda avisas, claro despues de revisar el enlace. Saludos

Lo pude hacer con <link href="css/style.css" rel="stylesheet" type="text/css" \/>

Pero, con tu estilo y en un login de prueba. Ahora pruebo hacerlo directo en la web y con el mio a ver si queda bien y te comento

xfxstudios · #15 (**permalink**) 30/03/2016, 22:31

perfecto amigo

ezzezhito · #16 (**permalink**) 30/03/2016, 22:59

Ok, he probado.
Lo puse y funciona (use tu codigo de estilo)
El problema es que el codigo de estilo que tengo yo, es totalmente diferente y no se como adaptarlo al que me diste vos.

este es el que tengo, en teoria, ahi esta el estilo del box tambien

Cita:

div#ds_container{
width: 95%;

}
div#label9.label-text,div#label10.label-text{
top:2px !important;
}

#bot-nav{

float: right;
min-width: 90px
}
.input-msg.show{
font-size: 11px ! important;
font-weight: bold ! important;
width: 65% ! important;
}
#label8,#label9,#label10{
left:7px ! important;
top: 2px;
}
#expiryForm div#label9.label-text,#expiryForm div#label10.label-text{
top:0px !important;
}
#expiryForm div#label11{
left:7px !important;
}
.hsa label{
float: none ! important;
width: auto! important;
display: inline! important;
font-weight: normal! important;
}
#passwordfocusmsg{
display:none! important;
}
.btn.bigblue input.btnSignIn { background:none !important; box-shadow:none; margin-top:2px; }
.bigblue span input.btnSignIn {
padding: 7px 23px 8px 23px;
font-size: 1.3em;
color: #fff !important;
text-shadow: 0 -1px #367BBB;
display: inline-block;
}
.red {
color:red ! important;
}
tr td:last-child{

display:none;
}
p.intro{
width:70%;
}

p#your-{
width:100%! important;
}
div.column.last.main.daw2sv{
width:100%! important;
}
h3.hsa.heading
{
font-size: 14px ! important;
margin-right: 0;
word-wrap: break-word;
}
#send-temporary-security-code-to{
font-weight:bold;
font-size:12px ! important;
margin: 15px 0 10px 0;
}
h2.headingStyle{
font-size: 20px! important;
}
div.formrow.radio.hsa{
padding-bottom: 5px! important;
}
.recovery{
padding-top:15px;
}
/*Expiry specific css start*/
strong{
font-weight:bold;
color:black
}

#expiryForm p.intro,#harvest p.intro,#harvest p,.formrow label{
width:100%;
font-size:14px;
color: #333;
}
#ds_container{
padding-top: 2%
}
#expiryForm #ds_container{

width:87%
}
#expiryForm .formrow{
margin: 14px 0px 0 -10px;
}
#passwordfocus{
color: #666;
font-size: 11px;
letter-spacing: 0.07mm;
}
#passText{margin-left:0px!important}

div#bot-nav-panel{
width: 100%;
}
#refresh_device_div,span#refresh_device{
float:left;
}
#refresh_device_div{
width: 50%;
}
/*Hack to make the article tag expand based on the internal div tags (which have float css) , without using overflow:hidden

Since overflow:hidden causes problems to display the password-pop up correctly*/
/* new clearfix */
.base-template:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .base-template { zoom: 1; } /* IE6 */
*:first-child+html .base-template { zoom: 1; } /* IE7 */
.base-template { overflow:visible!important; }
/*Expiry specific css end*/
/* End hide from IE-mac */
/*****************CUSTOM ADDED FOR DS LOGIN & HSA::::END********************/

div#recovery-key-container{
text-align:center;
}
//for offline devices
.edit .formrow {

margin: 1em 9px 0 0;

width: 449px;
}

.formrow.hsa.offline span.bubble-originator {
position: relative;
}

.formrow.hsa.offline .bubble-originator {
display: none;
}
.formrow.hsa.offline .information-popup-wrapper {
left: 0;
}

.topPosition {
top: -45px;
}

.information-popup-wrapper {
position: absolute;
display: none;
z-index: 10;
}
.topcap {
position: absolute;
top: -13px;
right: 14px;
width: 252px;
background: url(../../../../) no-repeat 0 0;
z-index: 9999;
height: 13px;
}

.validation-dialog-offline {
width: 205px;
padding: 0 20px 0px 55px;
background: url(../../../../) no-repeat 0 0;
background-position: center;
display: inline-block;
position: relative;
z-index: 999999;
height: 100%;
}
.bottomcap {
left: 14px;
position: absolute;
bottom: -13px;
right: 14px;
height: 13px;
width: 252px;
background: url(../../../..) no-repeat 0 0;
z-index: 9999;
}

/*information pop up*/

/*.information-popup-wrapper {
position: absolute;
display: none;
z-index: 10;
}

.information-popup-wrapper.offline-device-status {
//left: 227px;
left: -108px;
}

.information-popup-wrapper.ipad-3 {
//top: -161px;
top: -236px;
left: -111px;
}*/

.information-popup-wrapper h1 {
font-weight: bold;
font-size: 12px;
padding-top: 10px;
padding-bottom: 5px;
margin: 0;
margin-left: 14px;
word-wrap: break-word;
}

.information-popup-wrapper .info-dialog {
padding-top: 5px;
padding-bottom: 5px;
}

.information-popup-wrapper .info-dialog h1,
.information-popup-wrapper .info-dialog p {
margin: 0 0 5px -12px;
padding: 0;
}

.information-popup-wrapper.horizontal .info-dialog h1,
.information-popup-wrapper.horizontal .info-dialog p {
margin: 5px 15px 5px -20px;
}

.information-popup-wrapper .info-dialog h1 {
font-weight: bolder;
font-size: 12px;
}

.information-popup-wrapper .info-dialog p {
font-weight: normal;
}

.information-popup-wrapper .topcap,
.information-popup-wrapper .bottomcap {
left: 14px;
}

.formrow.hsa.offline .information-popup-wrapper {
left: 0;
}
.hsa .device-list .row.offline .status-text:hover + .information-popup-wrapper {
display: block;
}

.formrow.hsa label,
.formrow.hsa.offline label {
float: none;
display: inline;
text-align: left;
width: auto;
}

.formrow.hsa.offline span.bubble-originator {
position: relative;
}
.hsa .device-list .row.offline .status-text:hover {
cursor: pointer;
}

.formrow.hsa.offline .bubble-originator {
display: none;
}

.formrow.hsa.offline label:hover {
cursor: pointer;
}

.information-dialog {
position: relative;
padding: 0 20px 3px 5px;
background: url(../../../../) repeat-y 0 0;
z-index: 999999;
background-position: center;
height: 100%;
}

.information-dialog {
width: 231px;
}

.information-dialog em,
.information-dialog p {
font-size: 12px;
padding-top: 10px;
padding-bottom: 5px;
margin: 0;
margin-left: 14px;
}

.information-dialog em {
font-weight: bold;
}

.information-dialog p {
font-weight: normal;
word-wrap: break-word;
}
article.base-template{
min-height:450px;
}
.main-footer .gf-sosumi{
padding-top:15px;
}
img.img-22{
margin-top:-5px;
}
div.right div.button-panel{
padding-top:1em ! important;
}
.biggrey span{
padding: 7px 23px 8px 23px;
}
a{
text-decoration:none;
}
p.bubble_info_style{
display:inline-block;
font-size:12px ! important;
color:black;
}
.formrow.hsa.offline label{
font-size:12px ! important;
}
/*span#ipad-offline-information1.bubble-originator{
display:inline ! important;
}*/
.formrow.hsa.offline .horizontal{

left:-10px ! important;
}
.formrow.hsa.offline .topPosition{
top: -53px ! important;
}
span#refreshingDeviceList,#refreshing{
width:200px ! important;
padding-top:10px ! important;
font-size:1em ! important;
}
span#refreshImage,#refreshing.show{

display:inline;
padding-top:10px ! important;
}
#refreshingDeviceList,#refreshing {
background: url('../../../../') 0% 90% no-repeat;
padding-left: 18px;
color: #929292 !important;
height: 16px;
line-height: 16px;
display: none;
background-size: 16px 16px;
}
#resendImage{
color: #08C;
font-size: 12px;
position:relative;
left:-12px;
}
#resendImage img{
padding-right:5px !important;
}
a{
text-decoration:none !important;
}
#bot-nav-panel.styler{
padding-top:20px;
}

label.radio-label{
font-size: 12px ! important;
}
#rkOverlayPanel .button-panel hr{
display:none;
}
.accountLocked #rkOverlayPanel #bot-nav-panel.styler{
padding-top:2px ! important;
}
.grey_out p{
margin-top: -12px ! important;
text-align: left;
width: 250px;
color: #999;
}
.grey_out img{
width: 14px;
height: 17px;
}
h2#your-apple-id-heading{
font-size: 20px ! important;
font-weight: normal;
}
p#your-apple-id.intro{

font-size: 14px;
line-height: 1.5em;
color: #888;
}
.sign-in-panel h2,h2.infoString,h4.editableLabel{
font-size:20px !important;
font-weight: normal;
}
div#label7.label-text,div#label8.label-text,div#label6.label-text{
left:7px ! important;
top:2px ! important;
}
a#rkLink{
font-size: 12px ! important;
}

p#after-trusted-device-choices{
font-size: 12px ! important;
}

div.right.manage div.button-panel{
margin-top:-10px;
}
#refreshImage img,.send-code #resendImage img{
width: 14px;
height: 17px;
}
.grey_out img{
margin-top: -7px ! important;
}
.editableLabel,#harvest p,.birthdate{

margin-bottom: 0.8em! important;
}
#birthYear +.alert{
top: 45px ! important;
right: 300px;
}
#harvest .button-panel
{
margin-top: 3em ! important;
}

#harvest span.formwrap.security-question.tbox-wrap{
background: none ! important;
}

#harvest select.questionsWidth{
width:310px;
}
div.support{
bottom: 0px ! important;
left: 0px ! important;
}
span#rememberBrowser{
font-size: 12px; float: left; padding-left: 10px; padding-top: 3px;
}

span#rememberMeCheckBox{
float:left;padding-bottom: 1px;padding-left: 5px;
}
.grey_out{
color: #999;
}

ezzezhito · #17 (**permalink**) 30/03/2016, 23:42

ok, ah quedado bastante bien, eh estado probando algunas cosas.
Me falta, adjuntarle unas imagenes al rededor del box, ahi en codigo de arriba, estan, pero aqui, en este codigo nuevo, no puedo apuntarlas y que queden