0
234
VisualizaçõesCómo agregar seleccionar con botón con radio circular
Quiero que el símbolo de intercalación desplegable sea visible, lo que no sucede actualmente. Quiero que tanto <select> como <button> tengan un radio circular como se muestra en la imagen.
.top-select{ width: 70%; padding-left: 10px; border-top-left-radius: 50px !important; border-bottom-left-radius: 50px !important; border-top-right-radius: 50px; border-bottom-right-radius: 50px; } .find-btn{ border: 1px solid; border-top-left-radius: 50px !important; border-bottom-left-radius: 50px !important; border-top-right-radius: 50px; border-bottom-right-radius: 50px; } .margin-appen{ margin-left: -43px !important; } .btn-tutor:focus{ box-shadow: none; outline: none; } <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <!-- Popper JS --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div> <div class="input-group mb-3"> <select class="select top-select" id="select02" > <option selected>What do you want to learn</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="input-group-append margin-appen"> <label class="input-group-text find-btn" for="select02"> <button class="btn btn-tutor">Find tutor</button> </label> </div> </div> </div> </body> </html>
2 Respostas
Responde à pergunta0
.input-group{ border-radius: 50px; border:1px solid red; overflow:hidden; width:400px !important; flex-wrap: nowrap !important; } .top-select, .top-select:focus-visible{ border:none; outline:none; width:70%; padding-left:15px; } .find-btn{ width:100%; border: 1px solid red !important; border-radius: 50px !important; justify-content: center; } .margin-appen{ flex:1; } .btn-tutor:focus{ box-shadow: none; outline: none; } <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <!-- Popper JS --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div> <div class="input-group mb-3"> <select class="select top-select" id="select02" > <option selected>What do you want to learn</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="input-group-append margin-appen"> <label class="input-group-text find-btn" for="select02"> <button class="btn btn-tutor">Find tutor</button> </label> </div> </div> </div> </body> </html>0
su estilo de arranque está anulando su CSS. la solución "más fácil" (que también usó) es agregar !important a sus radios. PERO Usar !important no es una buena opción, ya que lo más probable es que desee anular sus propios estilos en el futuro. Eso nos deja con las prioridades de CSS.
tl; dr:
La forma más fácil de superar esto es asignar una ID arbitraria adicional a uno de los elementos raíz de su página, así: <body id="bootstrap-overrides">
De esta manera, puede anteponer cualquier selector de CSS con su ID, agregando instantáneamente 100 puntos de peso al elemento y anulando las definiciones de Bootstrap.
Básicamente, cada selector tiene su propia fuerza:
en línea> ID's> Clases/pseudo-clases> etiquetas/pseudo-elementos
Entre los dos estilos de selector, los navegadores elegirán siempre el que tenga más peso. El orden de sus hojas de estilo solo importa cuando las prioridades son iguales; es por eso que no es fácil anular Bootstrap.
Su opción es inspeccionar las fuentes de Bootstrap, descubrir cómo se define exactamente un estilo específico y copiar ese selector para que su elemento tenga la misma prioridad. Pero perdemos toda la dulzura de Bootstrap en el proceso.
La forma más fácil de superar esto es asignar una ID arbitraria adicional a uno de los elementos raíz de su página, así: <body id="bootstrap-overrides">
De esta manera, puede anteponer cualquier selector de CSS con su ID, agregando instantáneamente 100 puntos de peso al elemento y anulando las definiciones de Bootstrap.
(por cierto, también puede simplemente llamar a border-radius:50px; en lugar de llamar a cada esquina, y si desea tener varios radios, puede llamar border-radius: 50px 10px 2px 0px (en el sentido de las agujas del reloj))