Vueで複数選択ボックスの前にある円を削除する方法-フロントエンドQ&A-php.cn

Vueで複数選択ボックスの前にある円を削除する方法

PHPz

リリース： 2023-03-31 14:10:03

オリジナル

984 人が閲覧しました

Vue では、複数選択ボックスは非常に一般的なフォームコントロールであり、ユーザーが 1 つ以上のオプションを選択できるようにするために使用されます。デフォルトでは、チェックボックスの前に小さな円が表示され、チェックされているかどうかのステータスが示されます。ただし、場合によっては、この小さな円を削除して、チェックボックス自体のスタイルを維持したい場合もあります。この記事では、Vueの複数選択ボックスの前にある丸を削除する方法を紹介します。

方法 1: CSS スタイルを使用する

最も簡単な方法は、CSS スタイルを使用して、複数選択ボックスの前にある円を削除することです。削除の効果を実現するスタイルを設定することで、円を非表示にすることができます。

<template>
  <div>
    <label>
      <input type="checkbox" class="checkbox"> 此处为多选框标签
    </label>
  </div>
</template>

<style>
  .checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #999;
    border-radius: 3px;
    width: 20px;
    height: 20px;
  }

  .checkbox:checked {
    background-color: #007aff;
    border-color: #007aff;
  }
</style>

ログイン後にコピー

次のスタイルを複数選択ボックスのクラスに追加できます:

.checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #999;
  border-radius: 3px;
  width: 20px;
  height: 20px;
}

ログイン後にコピー

ここでは、Appearance 属性を使用して、複数選択ボックスが表示されないようにします。デフォルトの円を表示しないようにします。次に、複数選択ボックスの境界線、サイズ、角の丸いスタイルを定義しました。最後に、CSS セレクターを使用して、複数選択ボックスが選択されているかどうかを選択し、背景色や境界線の色などの対応するスタイルを追加できます。

方法 2: サードパーティのコンポーネントライブラリを使用する

CSS スタイルを自分で作成したくない場合は、サードパーティのコンポーネントライブラリを使用して円を削除することもできます。 Element UI や Ant Design Vue などの複数選択ボックスの前。これらのコンポーネントライブラリはこの問題を解決し、より複雑なフォーム設計を完成できる他の多くのフォームコントロールを提供します。

Element UI

Element UI では、border プロパティを false に設定することで、複数選択ボックスの前にある円を削除できます。。

<template>
  <div>
    <el-checkbox v-model="checked" border=false>此处为多选框标签</el-checkbox>
  </div>
</template>

ログイン後にコピー

上記のコードは、el-checkbox コンポーネントを使用しています。border プロパティを false に設定して、マルチマークの前の円を削除します。・セレクトボックスです。

Ant Design Vue

Ant Design Vue では、checked と bordered## を設定することで、複数選択ボックスの前にある円を削除できます。＃プロパティ。

<template>
  <div>
    <a-checkbox v-model="checked" :bordered="false">此处为多选框标签</a-checkbox>
  </div>
</template>

ログイン後にコピー

a-checkbox コンポーネントは上記のコードで使用されています。border 属性を false に設定して、前にある円を削除します。複数選択ボックス。

概要

Vue では、CSS スタイルの使用、サードパーティのコンポーネントライブラリの使用など、複数選択ボックスの前の円を削除する方法がたくさんあります。これらの方法により、フォームスタイルを自由にデザインすることができ、ページスタイルをより統一感のある美しいものにすることができます。もちろん、どの方法を選択するかは状況によって異なりますが、小さな円を削除するだけであれば、CSS スタイルを使用するだけで十分です。より複雑なフォームコントロールが必要な場合は、サードパーティのコンポーネントライブラリを使用して完成させることができます。

以上がVueで複数選択ボックスの前にある円を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。